按比例缩放Img以填充整个容器，而无需CSS覆盖(javascript/React)

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

const ImageContainer = ({ imageUrl }) => {
  const [containerWidth, setContainerWidth] = useState(0);
  const [containerHeight, setContainerHeight] = useState(0);
  const [imageWidth, setImageWidth] = useState(0);
  const [imageHeight, setImageHeight] = useState(0);

  useEffect(() => {
    const container = document.getElementById('container');
    const image = document.getElementById('image');

    const handleResize = () => {
      setContainerWidth(container.offsetWidth);
      setContainerHeight(container.offsetHeight);
      setImageWidth(image.offsetWidth);
      setImageHeight(image.offsetHeight);
    };

    handleResize();

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

  const handleImageLoad = () => {
    const containerRatio = containerWidth / containerHeight;
    const imageRatio = imageWidth / imageHeight;

    if (containerRatio > imageRatio) {
      setImageWidth(containerWidth);
      setImageHeight(containerWidth / imageRatio);
    } else if (containerRatio < imageRatio) {
      setImageWidth(containerHeight * imageRatio);
      setImageHeight(containerHeight);
    }
  };

  return (
    <div id="container">
      <img
        id="image"
        src={imageUrl}
        alt="Image"
        onLoad={handleImageLoad}
        style={{ width: imageWidth, height: imageHeight }}
      />
    </div>
  );
};

export default ImageContainer;