在 Safari 中的 flexbox 中拉伸图像 [英] Image stretching in flexbox in Safari

问题描述

这只是 Safari 中的一个问题，在我看来像是一个 Safari 错误.这是一个fiddle，其中包含该问题的简化版本.

当图像位于设置了宽度且 height: auto 的嵌套 flexbox 元素中时，它会被拉伸……自动高度不起作用.是否需要添加一些额外的东西才能在 Safari 中工作?

.container {显示:弹性；弹性方向:列；}.container 部分:第一个孩子 {显示:弹性；底边距:25px；}.container img {宽度:125px；高度:自动；}

<部分><img src="https://via.placeholder.com/250"></节><部分><img src="https://via.placeholder.com/150"></节>

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

解决方案

这显然是一个错误.

align 的默认设置-items 属性 是 stretch.大多数主要浏览器都会明智地处理这个问题，在容器范围内拉伸图像.

无论出于何种原因，Safari 都会将图像拉伸到其自然高度，从而带动容器.

<小时>

flex-direction: row

要解决此问题，请使用 align-items 属性中的 flex-start 覆盖 stretch 默认值.

.container {显示:弹性；弹性方向:列；}.container 部分:第一个孩子 {显示:弹性；对齐项目:flex-start；/* 新的 */底边距:25px；}.container img {宽度:125px；高度:自动；}

<部分><img src="http://i.imgur.com/60PVLis.png"></节><部分><img src="http://i.imgur.com/60PVLis.png"></节>

jsFiddle 演示

<小时>

flex-direction: column

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

如果您将图像尺寸从

.container img {宽度:125px；高度:自动；}

到

.container img {宽度:自动；高度:125px；}

...你会在 Safari 中遇到与 flex-direction: row 相同的问题，并且需要 align-items: flex-start 进行更正.

.container {显示:弹性；弹性方向:列；}.container 部分:第一个孩子 {显示:弹性；/* 对齐项目: flex-start;*/底边距:25px；}.container img {宽度:自动；高度:125px；}

<部分><img src="http://i.imgur.com/60PVLis.png"></节><部分><img src="http://i.imgur.com/60PVLis.png"></节>

jsFiddle 演示

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue.

When an image is in a nested flexbox element with a width set and height: auto it is being stretched... the auto height is not working. Does something extra need to be added for this to work in 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>

I expect the height of the image to automatically be adjusted to maintain aspect ratio. This works in all browsers except Safari. In Safari the image is stretched and the auto height does not work.

解决方案

It certainly appears to be a bug.

The default setting for the align-items property is stretch. Most major browsers handle this sensibly, stretching the image within the confines of the container.

For whatever reason, Safari stretches the image to its natural height, taking the container along for the ride.

---

flex-direction: row

To fix the problem, override the stretch default value with flex-start in the align-items property.

.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

Switching the direction of the flex container to column also fixes the problem. This works because align-items now applies to width and you've defined a width on the image.

If you reverse the image dimensions from

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

to

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

... you'll have the same problem in Safari as in flex-direction: row, and need align-items: flex-start for the correction.

.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 中的 flexbox 中拉伸图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！