调整窗口大小时，React组件背景图像不适合容器

.container {
  background-image: url('your-image-url.jpg');
  background-size: cover; /* 或者 contain */
  background-position: center;
  background-repeat: no-repeat;
}

.container {
  background-image: url('small-image-url.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .container {
    background-image: url('medium-image-url.jpg');
  }
}

@media (min-width: 1200px) {
  .container {
    background-image: url('large-image-url.jpg');
  }
}

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [backgroundImage, setBackgroundImage] = useState('small-image-url.jpg');

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 1200) {
        setBackgroundImage('large-image-url.jpg');
      } else if (window.innerWidth >= 768) {
        setBackgroundImage('medium-image-url.jpg');
      } else {
        setBackgroundImage('small-image-url.jpg');
      }
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div
      className="container"
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      }}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;