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

问题描述

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

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://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

这是什么原因造成的?

我添加了此CodePen 来说明我的意思.

I added This CodePen to demonstrate what I mean.

推荐答案

正在扩展，因为align-self的默认值为stretch. 将align-self设置为center.

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

align-self: center;

在此处查看文档: align-self

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