Safari在flexbox中进行图像拉伸

Question

这只是Safari中的一个问题，对我来说似乎是Safari的错误。这是fiddle，其中包含问题的简化版本。

当图像位于宽度设置为STUFF()的嵌套flexbox元素中时，该图像将被拉伸...自动高度无法正常工作。要在Safari中正常运行需要添加一些额外的东西吗？

REPLACE()

WHERE

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

Answer 1

这肯定是一个错误。

the align-items property的默认设置为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 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

Answer 2

增加高度：内在的；为我工作以修复野生动物园中的伸展高度。将其添加到图像本身。不是包装器。您仍然需要高度：自动用于其他浏览器。

Answer 3

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

无论出于何种原因，在我的案例中最终修复它的是将 display:block 直接添加到图像中。

Answer 4

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

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

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

Answer 6

对我来说，这两种解决方案都没有奏效。我已经有了 flex-direction: column 和 aligh-items: center，不过，就我而言，我在同一个 flex 容器中还有一些其他元素，与图像一起。不知道有没有影响。

在我的案例中实际解决的问题只是用 div 包裹图像：

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

Answer 7

只需申请

height: 100% !important

或类似 img { height: 100% !important; }