Safari 中 flexbox 中的图像拉伸

Image stretching in flexbox in Safari

这只是 Safari 中的一个问题，在我看来像是 Safari 的一个错误。这是一个 fiddle 问题的简化版本。

当图像位于设置了宽度的嵌套 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 中图像被拉伸并且自动高度不起作用。

查看我的演示以获取工作示例，添加 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>

这显然是一个错误。

the align-items property 的默认设置是 stretch。大多数主流浏览器都会明智地处理这个问题，在容器.

的范围内拉伸图像

无论出于何种原因，Safari 都会将图像拉伸到其自然高度，同时携带容器。

flex-direction: row

要解决此问题，请在 align-items 属性.

中用 flex-start 覆盖 stretch 默认值 

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

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 {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  /* align-items: flex-start; */
  margin-bottom: 25px;
}

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

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

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

如果父 <img/> 标签有 display:flex; 添加 align-items: center;

<div style="display:flex;align-items: center;">
    <img "img.jpg"/>
</div>

对于以后查看此 post 的任何人：我遇到了固定高度 flex-direction:row flexbox 和带有 height:100% 的 flex-children 内部图像的问题。投票最高的解决方案不足以修复它。

无论出于何种原因，最终解决我的问题的是直接将 display:block 添加到图像中。

对我来说，这两种解决方案都不起作用。我已经有了 flex-direction: column 和 aligh-items: center，尽管在我的例子中，我在同一个 flex 容器中还有一些其他元素，除了图像。不知道有没有影响。

在我的案例中，真正解决问题的只是用 div:

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