Firefox 中的 Flex 会自动缩小图像，但 Chrome 中不会

Question

<h1>Window width:</h1>

<div style="display: flex">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

这是 Firefox 中的结果：

这是 Chrome 中的结果：

如您所见，在 Firefox 中，图像已被很好地缩小和调整大小，因此所有图像都可以排成一行，无需换行或裁剪。在 Chrome 上，图像会保持其原始大小，这会导致在小窗口或 div 中进行裁剪。

这是预期的吗？难道我做错了什么？如何在 Firefox 和 Chrome 中获得相同的结果？

Answer 1

这些是弹性容器中的初始设置：

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

简写为：

• flex: 0 1 auto

因此，即使您没有在代码中指定这些规则，它们也适用于图像。

图像不能增长，它们可以缩小（同样且刚好足以避免溢出容器），并且它们最初的大小为自然宽度 (400 像素)。

这就是您在 Firefox 中看到的。图像正在缩小以很好地适应容器。

在 Firefox 中，弹性规则会覆盖图像的自然尺寸。

然而，在 Chrome 中，情况正好相反。以图片尺寸为准。

简单的跨浏览器解决方案是将图像包装在另一个元素中，因此这个新包装器成为 flex 项并采用默认的flex: 0 1 auto，无需覆盖任何内容。

img {
  width: 100%;
}

<h1>Window width:</h1>

<div style="display: flex">
  <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
  <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
  <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex">
    <span><img src="https://unsplash.it/400/225?image=10" alt="1"></span>
    <span><img src="https://unsplash.it/400/225?image=11" alt="2"></span>
    <span><img src="https://unsplash.it/400/225?image=12" alt="3"></span>
  </div>
</div>

就遵循规范指南的浏览器而言，似乎是 Firefox。在 flex 容器中，应以 flex 规则为准：

7.1. The flex Shorthand

当一个盒子是一个弹性项目时，flex 被咨询而不是主尺寸属性来确定盒子的主要尺寸。

弹性项目的main size property 是width 或height 属性。

我说 Firefox“似乎”是正确的，因为规范说 flex 规则应该优于 CSS width 和 height 属性。

当然，在这种情况下，图像的尺寸并没有在 CSS 中定义。它们是图像的自然尺寸。因此，这种情况可能会留待解释，Chrome 可能不会违反任何准则。

但是，在另一种情况下，height 属性是一个因素，Firefox 坚持使用flex，而 Chrome 坚持使用height：Why is Firefox not honoring flexed div's height, but Chrome is?

Answer 2

在这种情况下，将 align-items: flex-start 添加到 flex 容器中，然后将此规则添加到图像中

img {
  min-width: 0;
  width: 100%;
}

由于align-items 默认为stretch，所以它们会拉伸，然后min-width 默认为auto，这再次告诉它们是原始大小，最后，给它们width: 100%，以便它们水平适合并调整它的高度以保持纵横比。

注意，经过快速浏览器测试后，这在 IE11 上不起作用（但在 Edge 上起作用），因此根据使用的代码，到处都有错误存在。第二个选项，其中一个包装图像，但适用于 IE11。

堆栈sn-p

img {
  min-width: 0;
  width: 100%;
}

<h1>Window width:</h1>

<div style="display: flex; align-items: flex-start;">
  <img src="https://unsplash.it/400/225?image=10" alt="1">
  <img src="https://unsplash.it/400/225?image=11" alt="2">
  <img src="https://unsplash.it/400/225?image=12" alt="3">
</div>

<h1>Wrapped in 500px wide div:</h1>

<div style="width: 500px; overflow: auto">
  <div style="display: flex; align-items: flex-start;">
    <img src="https://unsplash.it/400/225?image=10" alt="1">
    <img src="https://unsplash.it/400/225?image=11" alt="2">
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

---

另一种选择是包装图像，并将img 设置为width: 100%

img {
  width: 100%;
}

<div style="display: flex;">
  <div>
    <img src="https://unsplash.it/400/225?image=10" alt="1">
  </div>
  <div>
    <img src="https://unsplash.it/400/225?image=11" alt="2">
  </div>
  <div>
    <img src="https://unsplash.it/400/225?image=12" alt="3">
  </div>
</div>

---

这篇 css3-flexbox-maintain-image-aspect-ratio 的帖子包含链接和一个很好的解释，关于浏览器如何/为什么呈现不同