`<img>` 在 Safari 中会失去比例

Question

我对 Safari 浏览器中

<img>

内的

flexbox

有问题（仅限）。我想创建一个具有相同高度但不同宽度图像的水平列表。我无法为每个图像设置精确的高度，因为它来自整个滑块与页面宽度（

33.333vw

）的比例。所以我使用

flexbox

并将

height: 100%

设置为

img

元素。

这是小提琴：https://jsfiddle.net/norin89/h9q8dtbe/

在 Chrome 中看起来不错：

但在 Safari 中，图像本身似乎具有正确的大小和比例，但包装元素 (

li

) 太宽 - 它被拉伸到图像的原始宽度 (

600px

)，而不是实际图像大小。

我一直在与样式作斗争，但找不到解决方案。对我来说这看起来像是 Safari 的 bug。 对于强制 Safari 表现得像其他浏览器一样的解决方案有什么想法吗？

更新：一种解决方案可以直接在

height

上设置

img

- https://jsfiddle.net/norin89/h9q8dtbe/8/。它在这个简化的示例中有效，但在实际项目中，整个

div

必须绝对定位，因此需要在

img

和

div

本身上设置高度。我正在寻找一种解决方案，只需设置一次高度并使用

img

自动调整

height: 100%

高度。

Answer 1

一个解决方案是添加一个 div：

<li>
  <div>
    <img src="https://picsum.photos/id/1/600/600" alt="" />
  </div>
</li>