Safari flexbox 中的图像拉伸

Posted 2023-03-06

【中文标题】Safari flexbox 中的图像拉伸

【英文标题】：Image stretching in flexbox in Safari

【发布时间】：2019-12-22 06:58:30

【问题描述】：

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

当图像位于设置了宽度的嵌套弹性框元素和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 中，图像被拉伸，自动高度不起作用。

【参考方案1】：

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

【讨论】：

我注意到添加 flex-direction: column; 也解决了这个问题，但对我来说这不应该是必需的。你能解释一下为什么需要这个吗？或者这只是 Safari 错误的解决方法？

对于 Bootstrap 4，您可以添加 class="flex-column flex-md-row" 以在大于手机的设备上将其恢复为水平状态，但仍然可以在 iphone 上进行修复..跨度>

【参考方案2】：

这显然是一个错误。

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 正在迅速成为新的 IE。

Safari 是否跟踪此问题？如果是，最好添加一个链接。

谢谢你！如果flex-direction发生变化，是否永久应用align-items: flex-start;而不关心flex-direction会导致任何问题？

听起来 WebKit 中的修复已在 2020 年底合并：bugs.webkit.org/show_bug.cgi?id=209983

@WildCat 不幸的是，截至 2021 年 5 月 21 日，此错误仍然存​​在。使用align-self: flex-start 是一种很好的解决方法。

【参考方案3】：

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

【讨论】：

这对我也有帮助，而且它似乎是侵入性最小的选项。

这里也一样，这是票！

哇，这是一个非常奇怪的行为。祝你好运?谢谢@Kerry Murphy

【参考方案4】：

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

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

【参考方案5】：

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

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

【参考方案6】：

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

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

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