使用CSS flex box模型,如何强制图像保持其纵横比?
JS小提琴:http://jsfiddle.net/xLc2Le0k/2/
请注意,为了填充容器的宽度,图像会拉伸或收缩。这很好,但我们是否也可以让它拉伸或缩小height以保持图像比例?
HTML
<div class="slider">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
<img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>
CSS
.slider {
display: flex;
}
.slider img {
margin: 0 5px;
}
发布于 2015-06-13 01:03:10
对于img标签,如果您定义了一侧,则另一侧的大小将被调整以保持纵横比,并且在默认情况下,图像将扩展为其原始大小。
利用这一事实,如果你将每个img标签包装到div标签中,并将其宽度设置为父div的100%,那么高度将根据你想要的纵横比。
* {
margin: 0;
padding: 0;
}
.slider {
display: flex;
}
.slider .slide img {
width: 100%;
}
发布于 2016-03-10 20:16:43
为了防止图像在flex父对象中的任一轴上拉伸,我找到了几个解决方案。
您可以尝试在图像上使用对象拟合,例如
object-fit: contain;
或者您可以添加特定于flex的规则,这在某些情况下可能工作得更好。
align-self: center;
flex: 0 0 auto;
发布于 2017-05-18 00:58:11
不需要添加包含div。
css "align-items“属性的默认值是"stretch”,这是导致图像被拉伸到其全部原始高度的原因。将css "align-items“属性设置为"flex-start”可以修复您的问题。
.slider {
display: flex;
align-items: flex-start; /* ADD THIS! */
}
https://stackoverflow.com/questions/30788131
复制相似问题