首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >更改高度时保持图像纵横比

更改高度时保持图像纵横比
EN

Stack Overflow用户
提问于 2015-06-12 01:59:34
回答 9查看 135.1K关注 0票数 122

使用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;
}
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30788131

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档