这就是Chrome中的结果:
正如您所看到的,在Firefox中,图像已经很好地缩小和调整大小,因此所有图像都适合一行而不包装或裁剪.在Chrome上,图像保持原始大小,导致小窗口或div中的裁剪.
这是预期的吗？难道我做错了什么？如何在Firefox和Chrome中获得相同的结果？
1> Michael_B..：
这些是flex容器中的初始设置:
flex-grow: 0
flex-shrink: 1
flex-basis: auto
简写是:
flex: 0 1 auto
因此,即使您未在代码中指定这些规则,它们也适用于图像.
图像不能生长,它们可以收缩(同样且足以避免溢出容器),并且它们最初的尺寸为其自然宽度(400px).
这就是你在Firefox中看到的.图像正在缩小以适应容器内部.
在Firefox中,弹性规则覆盖了图像的自然尺寸.
然而,在Chrome中,情况恰恰相反.图像的尺寸是普遍的.
简单的跨浏览器解决方案是将图像包装在另一个元素中,因此这个新的包装器成为flex项并采用默认值flex: 0 1 auto,并且不需要覆盖任何内容.
img {
width: 100%;
}
Window width:
Wrapped in 500px wide div:
京公网安备 11010802041100号