Safari在flexbox中进行图像拉伸

Question

这只是Safari中的一个问题，对我来说似乎是一个Safari错误。这里是一个捣鼓这个问题的简化版本。

当图像位于设置了宽度的嵌套flexbox元素中且height: auto正在拉伸时...自动高度不起作用。要在Safari中正常工作，是否需要添加一些其他内容？

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  margin-bottom: 25px;
}

.container img {
  width: 125px;
  height: auto;
}

<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>

我希望可以自动调整图像的高度以保持纵横比。此功能适用于除Safari之外的所有浏览器。在Safari中，图像被拉伸，自动高度不起作用。

Answer 1

添加高度：内在；为我工作以修复 safari 中的拉伸高度。将其添加到图像本身。不是包装纸。对于其他浏览器，您仍然需要 height: auto 。

Answer 2

这肯定是一个错误。

的默认设置的align-items属性是stretch。大多数主要的浏览器都会明智地处理此问题，从而将图像扩展到容器的范围内。

不论出于何种原因，Safari都会将图像拉伸到其自然高度，然后将容器随身携带。

flex-direction: row

要解决此问题，请stretch使用属性flex-start中的替换默认值align-items。

.container {
  display: flex;
  flex-direction: column;
}
.container section:first-child {
  display: flex;
  align-items: flex-start; /* new */
  margin-bottom: 25px;
}
.container img {
  width: 125px;
  height: auto;
}

<div class="container">
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
</div>

jsFiddle演示

flex-direction: column

将flex容器的方向切换为column也可以解决该问题。之所以有效，是因为align-items现在适用于宽度，并且您已经在图像上定义了宽度。

如果您将图片尺寸从

.container img {
   width: 125px;
   height: auto;
}

至

.container img {
   width: auto;
   height: 125px;
}

...在Safari中flex-direction: row，您将遇到与中相同的问题，需要align-items: flex-start进行更正。

.container img {
   width: 125px;
   height: auto;
}

.container img {
   width: auto;
   height: 125px;
}

jsFiddle演示

Answer 3

有关工作示例，请参阅我的演示，添加flex-direction: column;以解决此问题。

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.container img {
  width: 125px;
  height: auto;
}

<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>

Answer 4

对我来说，这两种解决方案都不起作用。我已经拥有了flex-direction: column和align-items: center，尽管就我而言，我还在同一个弹性容器中除了图像之外还有一些其他元素。不确定是否有任何影响。

在我的例子中，真正解决这个问题的只是用 div 包裹图像：

<section>
    <div>
        <img src="https://via.placeholder.com/250">
    </div>
</section>