为什么 flexbox 拉伸我的图像而不是保持纵横比? [英] Why does flexbox stretch my image rather than retaining aspect ratio?

问题描述

Flexbox 具有这种行为，它将图像拉伸到它们的自然高度.换句话说，如果我有一个带有子图像的 flexbox 容器，并且我调整了该图像的宽度，则高度根本不会调整并且图像会被拉伸.

div {显示:弹性；flex-wrap: 包裹;}图片{宽度:50%}

<img src="https://i.imgur.com/KAthy7g.jpg" ><h1>标题</h1><p>段落</p>

这是什么原因造成的?

解决方案

它正在拉伸，因为 align-self 默认值为 stretch.将 align-self 设置为 center.

align-self: center;

请参阅此处的文档:align-self

Flexbox has this behaviour where it stretches images to their natural height. In other words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn't resize at all and the image gets stretched.

div {
  display: flex; 
  flex-wrap: wrap;
}

img {
  width: 50%
}

<div>
    <img src="https://i.imgur.com/KAthy7g.jpg" >
    <h1>Heading</h1>
    <p>Paragraph</p>
</div>

What causes this?

解决方案

It is stretching because align-self default value is stretch. Set align-self to center.

align-self: center;

See documentation here: align-self

这篇关于为什么 flexbox 拉伸我的图像而不是保持纵横比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！