Html css3 flex：为什么img的宽度大于包含的宽度？

为什么

.itm

在这种情况下采用宽度

400px

而不是

160px

？在其他情况下，div的宽度和child相同，但当img更大并且浏览器缩放它时，我得到了空的空间

如何修复它？我只有一种方法：设置

与160x400 sime-like img相同的块

问题

由于弹性项目没有定义

宽度

或

弹性基础

属性，

flex

作为第一个元素分配的容器空间将采用

最大宽度

大小，第二个项目将采用剩余空间

解决方案

将

宽度

和

弹性基础

属性添加到弹性项目中

我不明白为什么会这样

我通过将最大宽度直接移动到每个图像来修复此问题。在我的例子中，这解决了问题，但如果容器中不仅有图片，而且还有其他内容，这将不会有帮助

.box{
显示器：flex；
}
.box.itm{
显示器：flex；
背景：红色；
右边距：10px；
}
.box.itm img{
最大高度：400px；
最大宽度：400px；
}
.box.itm.tst{
宽度：160px；
高度：400px；
背景：石灰；
}

与160x400 sime-like img相同的块

您刚刚提供了

max width

，它可以根据拉伸到的最大值调整元素。尝试将其替换为

宽度

并进行检查。@m4n0-hm，我这样做是因为我需要动态调整大小。图片可以有不同的大小和比例，我想适合它。如果您的图像高度大于其宽度，那么您将始终获得此输出。删除最大高度：100%要理解为什么会出现这种情况，图像可以有任何不同的大小，弹性项目必须具有动态宽度（取决于图像大小），我不能为所有

itm

设置一个静态宽度。