如何将图像缩放到div的大小[ReactJS TS]

import React from 'react';

const ImageContainer: React.FC = () => {
  return (
    <div className="image-container">
      {/* 图像将被缩放到此div的大小 */}
      <img src="your-image-url" alt="your-image" />
    </div>
  );
};

export default ImageContainer;

.image-container {
  width: 100%; /* 设置div的宽度为父元素的100% */
  height: 100%; /* 设置div的高度为父元素的100% */
  overflow: hidden; /* 如果图像超出div的大小，将隐藏超出部分 */
}

.image-container img {
  width: 100%; /* 设置图像的宽度为div的宽度 */
  height: 100%; /* 设置图像的高度为div的高度 */
  object-fit: cover; /* 如果图像的宽高比与div不一致，将按比例缩放并裁剪图像 */
}

import React from 'react';
import ImageContainer from './ImageContainer';

const App: React.FC = () => {
  return (
    <div className="app">
      <div className="image-wrapper">
        <ImageContainer />
      </div>
    </div>
  );
};

export default App;