为什么flexbox会拉伸我的图像而不是保留宽高比？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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来演示我的意思。

回答：

正在扩展，因为align-self默认值为stretch。设置align-self到center。

align-self: center;

在此处查看文档： align-self

以上是 为什么flexbox会拉伸我的图像而不是保留宽高比？ 的全部内容， 来源链接： utcz.com/qa/412675.html

回到顶部