html – 为什么flexbox伸展我的形象？

发布时间：2020-12-14 21:34:43 所属栏目：资源来源：网络整理

导读：Flexbox具有将图像拉伸到自然高度的行为。在其他(更具体)的单词中，如果我有一个带有子图像的flexbox容器，并且我调整了该图像的宽度，那么高度根本无法调整大小，并且图像被拉伸。 div img src="https://loremflickr.com/400/300" h4Appify/h4 p some text

Flexbox具有将图像拉伸到自然高度的行为。在其他(更具体)的单词中，如果我有一个带有子图像的flexbox容器，并且我调整了该图像的宽度，那么高度根本无法调整大小，并且图像被拉伸。

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

和这个样式表

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

我加了This codepen来表明我的意思。
是什么原因造成的？

解决方法

它是拉伸，因为对齐自我默认值是拉伸。
将对齐自身设置为中心。

align-self: center

请参阅文档：
align-self

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!