Safari 中的图像拉伸

这只是 Safari 中的一个问题，在我看来就像一个 Safari bug。下面是该问题的简化版 小提琴。

当一个图像是在一个嵌套的柔性箱元素设置宽度和 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 中，图像被拉伸，自动高度不起作用。

41918 次浏览
小开

请参阅我的演示以获得一个工作示例，添加 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>

小开
最佳答案

显然是个窃听器。

强 > align-items强 > 属性的默认设置是 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 演示

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 演示

小开

添加高度: 内在的; 对于我来说可以修复狩猎中的拉伸高度。将其添加到图像本身。不是包装纸。对于其他浏览器，您仍然需要 height: auto。

小开

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

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

对于任何人期待这个职位在未来: 我有这个问题与一个固定的高度 flex-direction:row柔性箱和图像内的柔性儿童与 height:100%。投票最多的解决方案不足以解决问题。

不管出于什么原因，最终在我的案例中修复它的是将 display:block直接添加到图像中。

小开

对我来说，这两种解决方案都不管用。我已经有了 flex-direction: column和 aligh-items: center，虽然，在我的情况下，我也有一些其他元素在同一个 Flex 容器，旁边的图像。不知道有没有影响。

在我的例子中，真正解决这个问题的方法是简单地用 div 包装图像:

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

提交答案