在 React 中用 img 填充 div答案

【问题标题】：Fill div with img in React在 React 中用 img 填充 div
【发布时间】：2021-08-21 12:24:58
【问题描述】：

我正在尝试用 img 填充 div（以下屏幕中的黑色区域）。

但是图像的比例不应该改变。并且当div的大小根据浏览器的大小而变化时，应该通过相应的调整宽度或者调整高度来显示图片。图像动态变化，所以我永远不知道它是高还是长。例如

最后，目标是在不改变图像比例的情况下，使图像尽可能大。

下面是我开发的代码。

<div className="asset__item">
  <a className="asset__img">                    
    <img
      alt="item image"
      src="/img/1.jpg"                        
    />                    
  </a>                  
</div>

CSS

.asset__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px 20px 20px 20px;
  width: 100%;
  border-radius: 16px;
  margin-top: 20px;
  background: #202020;
}
.asset__item img {
  width: auto;
  max-width: 100%;
}

请告诉我如何解决它。

我尽量不去修改asset__item的样式。不过也可以在里面加个 div 代替。

【问题讨论】：

这能回答你的问题吗？ How do I auto-resize an image to fit a 'div' container?
谢谢，但是这样比容器小的图像不会增加尺寸。

标签： html css reactjs

【解决方案1】：

您可以尝试使用 object-fit ： `

img{
   width: auto;
   max-width: 100%;
   object-fit:cover;
}

【讨论】：

【解决方案2】：

我找不到只使用 CSS 的方法。所以我使用 JavaScript 直接将width 和height 分配给我的图像。我们应该处理 4 种不同的情况：

相册图片和相册屏幕
相册图片和纵向屏幕
人像图片和相册屏幕
纵向图片和纵向屏幕

我的imgObj 包含图像的初始width 和height（我使用react-image-size 得到它们）。
这是代码：

    const imageObj = useSelector((state) => state.imageHandling.imageObj);

    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);

    const handleImageSize = () => {
        if (imageObj) {
            let w = 0;
            let h = 0;
            const ratio = imageObj.width / imageObj.height;

            const theSameTypes = () => {
                w = window.innerWidth;
                h = window.innerWidth / ratio;
                if (h > window.innerHeight) {
                    h = window.innerHeight;
                    w = h * ratio;
                }
            };

            if (imageObj.width > imageObj.height) {
                if (window.innerWidth > window.innerHeight) {
                    theSameTypes(); //album picture and album screen
                } else {
                    w = window.innerWidth; //album picture and portrait screen
                    h = w / ratio;
                }
            } else {
                if (window.innerWidth > window.innerHeight) {
                    h = window.innerHeight; // portrait picture and album screen
                    w = h * ratio;
                } else {
                    theSameTypes(); // portrait picture and portrait screen
                }
            }
            setWidth(w);
            setHeight(h);
        }
    };

    useEffect(() => {
        window.addEventListener("resize", handleImageSize);
        return () => {
            window.removeEventListener("resize", handleImageSize);
        };
    }, []);

    useEffect(handleImageSize, [imageObj]);

【讨论】：