Safari在flexbox布局中无法保持图像宽高比

Question

在这个例子中，“SQUARE”图像的大小为225x225。当它的高度被缩放以适应黄色的flex容器时，Chrome会保持其纵横比，但Safari不会。（Codepen）

有没有一种（纯CSS）方法可以使它在Safari中正常工作？ （图像大小必须继续依赖于其父级的高度。）

正确的方式（Chrome）：

错误（Safari）：

#green {
  display: flex;
  height: 200px;
  width: 300px;
  padding: 20px;
  background: green;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#yellow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: yellow;
}

img {
  height: 45%;
}

<div id="green">
  <div id="blue"></div>
  <div id="yellow">
    <img src="https://drive.google.com/uc?export=view&id=1SrFS5yT4nJZgzVgWzFYtyjHLeqsyJLtF"/>
    <img src="https://drive.google.com/uc?export=view&id=1SrFS5yT4nJZgzVgWzFYtyjHLeqsyJLtF"/>
  </div>
</div>

这些想法都不起作用：aspect-ratio: 1 / 1，object-fit: scale-down（参考 this question）；align-items: flex-start，object-fit: contain（参考 this question）。

- Rick Mohr

---

就我个人而言，我的 Firefox 在这方面与 Safari 的表现一致。 - Kaiido

运行了 Chrome 的二分查找，听起来像是个回归问题（从 v90 开始）。我怀疑 这个 CL 是罪魁祸首，二分查找确实指向了 这个日志。该更改似乎不是有意的，但我不是那个领域的专家。另外，这并不能帮助你在任何地方获得那种“有缺陷”的行为，抱歉。 - Kaiido

@Kaiido，谢谢你。也许你是对的，Safari的行为是“预期的”。但这似乎是一个直接可取的布局 - 如何实现？也许需要使用JavaScript。 - Rick Mohr

我在一个使用砖石布局的项目中也遇到了Safari浏览器上的同样问题，你找到解决方法了吗？@RickMohr - Prokyon

Answer 1

也许不是每个人的解决方案，但我用网格重新设计了我的布局，而不是使用 flexbox，在 Safari 中宽高比没有改变！

- belbo