如何调整图像大小以适合固定大小的 div？

Question

我正在开发项目（社交媒体网络应用程序），用户有权上传各种媒体。我将举例说明问题，假设我有 500px300px 的 div，并且我正在获取各种尺寸的图像，它可以是纵向或横向，也可以是 50px50px 等小图像。我想将这样的图像放入固定大小的 div 中，而不会丢失其纵横比，也不会被裁剪或拉伸。我尝试使用 css 属性，但它们似乎都不适用于所有类型的图像，我正在努力寻找解决方案。

渲染图像的组件：

import React, { useRef } from "react";

export default function Example(props) {
  const myRef = useRef(null);
  const [dimensionofImg, setDimensionofImg] = React.useState(null);
  const [dimensionsofDiv, setDimensionsofDiv] = React.useState(null);
  const [imagedimensions, setImagedimensions] = React.useState(null);

  React.useEffect(() => {
    setDimensionsofDiv({
      width: myRef.current.offsetWidth,
      height: myRef.current.offsetHeight
    });
  }, []);

  React.useEffect(() => {
    let dimensionTocompare;
    if (
      dimensionofImg &&
      dimensionofImg.width < dimensionofImg &&
      dimensionofImg.height
    ) {
      dimensionTocompare = dimensionsofDiv.width;
      let changedWidth =
        (dimensionTocompare * dimensionofImg.width) / dimensionofImg.height;
      setImagedimensions({
        maxWidth: "",
        maxHeight: "100%",
        width: changedWidth,
        height: ""
      });
    } else if (
      dimensionofImg &&
      dimensionofImg.width > dimensionofImg &&
      dimensionofImg.height
    ) {
      dimensionTocompare = dimensionsofDiv.height;
      let changedHeight =
        (dimensionTocompare * dimensionofImg.height) / dimensionofImg.width;
      setImagedimensions({
        maxWidth: "100%",
        maxHeight: "",
        width: "",
        height: changedHeight
      });
    }
    else if (
      dimensionofImg && dimensionofImg.width == dimensionofImg && dimensionofImg.height
    ) {
      
      setImagedimensions({
        maxWidth: "100%",
        maxHeight: "100%",
        width: "",
        height: ""
      });
    }
  }, [dimensionofImg, dimensionsofDiv]);

  function renderContent() {
    return (
      <div>
        width of div: {dimensionsofDiv.width}
        <br />
        height of div: {dimensionsofDiv.height}
      </div>
    );
  }

  return (
    <div>
      {dimensionsofDiv && renderContent()}
      dimensions of image width{dimensionofImg && dimensionofImg.width}, height
      {dimensionofImg && dimensionofImg.height}
      <div
        style={{ height: 500, width: 300, border: "solid 1px red" }}
        ref={myRef}
      >
        <img
          style={{
            maxWidth: `${imagedimensions && imagedimensions.maxWidth}`,
            maxHeight: `${imagedimensions && imagedimensions.maxHeight}`,
            width: `${imagedimensions && imagedimensions.width}`,
            height: `${imagedimensions && imagedimensions.height}`
          }}
          onLoad={(e) => {
            setDimensionofImg({
              width: e.currentTarget.offsetWidth,
              height: e.currentTarget.offsetHeight
            });
          }}
          alt=""
          src={props.src}
        />
      </div>
    </div>
  );
}

import "./styles.css";
import Example from "./component"
const src = "https://picsum.photos/100/800/?random";

export default function App() {
  return (
    <div className="App">
      <Example src={src}/>
    </div>
  );
}

Answer 1

最接近您需要的是object-fit: contain 属性。 这将填充 div，具体取决于它是横向（将占据所有宽度）还是纵向（将占据所有高度），并且所有这些都保持纵横比。您只需提供div 的尺寸。

div {
 width: 500px;
 height: 500px;
}

img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

Answer 2

将宽度限制为您的div 宽度并将height 保留为自动以保持ratio。

.container { width: 500px }

.container img { max-width: 100%; height : auto }