使用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;
}
https://stackoverflow.com/questions/30788131
复制相似问题