为什么flexbox会拉伸我的图像而不是保留宽高比？
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
-
使用以下代码，图像可以适应父对象的宽度： 但不管我是否设置父容器的高度： 为什么会发生这种情况，我如何使图像适应父母的身高？
-
问题内容： 我想下载一个图像（大小不明，但始终大致为正方形）并显示它，以便它在任何屏幕尺寸上都水平填充屏幕，并垂直拉伸以保持图像的纵横比。这是我的（无效）代码。它水平拉伸图像，但不垂直拉伸图像，因此将其压扁… 问题答案： 我使用自定义视图完成了此操作。设置layout_width =“ fill_parent”和layout_height =“ wrap_content”，并将其指向适当的可绘制对
-
我有一个使用CSS flexbox缩放到可用高度的DIV。在这个DIV中，我想在两个维度上与DIV一起缩放图像。这意味着它应该被缩放以保持其长宽比，并且小于相应DIV维度的维度应该居中。 我可以使图像跟随DIV的宽度，但不能跟随高度。因此，肖像图像脱离DIV界限。 这里有一个jsFiddle来演示这个问题。
-
我试图使用CSS设置背景图像，但原始图像被拉伸。如何保持原始图像大小，同时设置整个页面的背景？ 原始图像为：原始图像 结果是：结果图像 不同的是我的网页背景比原来的要大。 任何帮助都将不胜感激！！！
-
问题内容： 如果我有： 然后 会拉伸以填充该空间。我希望图像保持相同大小，但是要在DOM中占用那么多空间。我是否必须添加封装或？我讨厌添加样式标记。 问题答案： 是的，您需要一个封装div： 与类似： 其他解决方案（填充，边距）比较繁琐（因为您需要根据图像的尺寸计算正确的值），但也不能有效地使容器小于图像。 同样，上述内容可以更容易地适用于不同的布局。例如，如果您希望图像位于右下角：
-
我有一个图像叫做myImage。jpg。这是我的CSS： 出于某种原因，当我这样做时，myImage的宽度会延伸到整个屏幕上，但高度只会延伸到页面上其他所有内容的高度。所以如果我把一堆 在我的html页面，然后高度会增加。如果我的超文本标记语言页面只包含一个 那么背景图像的高度就是1的高度 我如何使我的背景图像的高度100%的屏幕，用户使用它来查看网页？