html - Flexbox 在 Firefox 和 Chrome 中的不同实现

Question

以下代码在 Firefox 中按预期工作，但在 Chrome 中，图像变得比 flex 容器大得多。

.r {
  width: 100%;
  height: auto;
  min-width: unset;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

火狐:

Chrome:

Answer 1

The following code works as expected in Firefox

我不同意这一点，因为对我来说 Chrome 的行为符合预期有两个原因:

1. 您将图像的宽度设置为 100%这意味着 100% 的包含 block (容器)由 600px 定义.所以每张图片都是600px

2. 图片不能shrink past its content size由于默认 min-width配置(请注意，在这种情况下使用 unset is equivalent to initial 所以它在某种程度上是无用的)。所以图像将保存在 600px

如果添加 min-width:0图像只会在宽度上缩小:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

chrome 的行为似乎已经改变，所以在上一个版本中不再需要以下内容

现在如果我们考虑你面对的高度 stretch两个浏览器中的效果也不一样。解释 ¹ 有点棘手，但如果您更改默认对齐方式，您将在 chrome 中获得预期结果:

.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
  align-items:flex-start;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

或者，如果您使用百分比值更改高度 you will make it fail并且还有你想要的东西(这有点老套，因为我们正在触发另一个问题来解决实际问题)

.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>

<罢工>

为什么 Firefox 会这样？

我不太清楚，但合乎逻辑的解释是 Firefox 没有考虑默认的 min-width配置优先考虑保持比例而不是拉伸(stretch)效果。

---

¹ 最初你的图像定义了容器的高度，因为它们很大(大约 700 像素高)，这个高度被容器使用，然后我们应用将属性添加到我们的图像，以便它们缩小宽度，并且由于默认对齐方式是拉伸(stretch)，它们将拉伸(stretch)到容器的高度，该容器最初由它们自己的初始高度定义，从而创建此渲染。

如果我们去除拉伸(stretch)效果，图像 will try to keep their ratio因为我们移除了高度限制。

如果我们考虑高度的百分比值，则逻辑相同。这个将无法auto我们回到默认行为(保持纵横比)

---

另一种选择

出现此问题的原因是使用图像替换了具有固有尺寸的元素，其中宽度/高度的计算不像其他元素那么简单。

为避免此类行为，最好将图像包裹在 div 中并避免将它们作为 flex 元素。

.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
</div>