在 React 中用 img 填充 div

Posted 2023-03-05

【中文标题】在 React 中用 img 填充 div

【英文标题】：Fill div with img in React

【发布时间】：2021-08-21 12:24:58

【问题描述】：

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

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

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

下面是我开发的代码。

<div className="asset__item">
  <a className="asset__img">                    
    <img
      
      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?

谢谢，但是这样比容器小的图像不会增加尺寸。

【参考方案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]);