Question

＆＃13;

<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>

＆＃13;

这就是Firefox中的结果：

这就是Chrome中的结果：

正如您所看到的，在Firefox中，图像已经缩小并调整大小，因此所有图像都适合一行而不包装或裁剪。在Chrome上，图片保持原始大小，导致小窗口或div中的裁剪。

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

Answer 1

这些是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%;
}

<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“看起来”是正确的，因为规范说灵活规则应优先于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，这再次告诉他们原始大小，最后，给他们{ {1}}因此它们水平放置并调整其高度以保持纵横比。

请注意，经过快速的浏览器测试后，这不会在IE11上运行（但在Edge上运行），因此根据使用的代码，bug几乎无处不在。第二个选项，其中一个包装图像，但在IE11上工作。

Stack snippet

＆＃13;

width: 100%

＆＃13;

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

＆＃13;

另一种选择是包装图像，并将<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

＆＃13;

width: 100%

＆＃13;

img {
  width: 100%;
}

＆＃13;

这篇文章css3-flexbox-maintain-image-aspect-ratio与一个很好的解释相关联，关于浏览器如何/为何呈现不同的方式

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

2 个答案: