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
stretch
center
align-self: center;
在此处查看文档: align-self