为了账号安全,请及时绑定邮箱和手机立即绑定

更改高度时保持图像宽高比

/ 猿问

更改高度时保持图像宽高比

慕容3067478 2019-11-14 10:38:03

使用CSS flex box模型,如何强制图像保持其纵横比?


JS小提琴:http://jsfiddle.net/xLc2Le0k/2/


请注意,图像会拉伸或收缩以填充容器的宽度。很好,但是我们还可以拉伸或缩小高度以保持图像比例吗?


的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;

}


查看完整描述

3 回答

?
一只斗牛犬

对于img标签,如果您定义一侧,那么将调整另一侧的大小以保持纵横比,并且默认情况下,图像会扩展到其原始大小。


使用这个事实,如果将每个img标签包装到div标签中,并将其宽度设置为父div的100%,则高度将根据所需的纵横比确定。


http://jsfiddle.net/0o5tpbxg/


* {

    margin: 0;

    padding: 0;

}

.slider {

    display: flex;

}

.slider .slide img {

    width: 100%;

}


查看完整回答
反对 回复 2019-11-14
?
幕布斯7119047

为了防止图像在弹性父级中沿任一轴拉伸,我找到了几种解决方案。


您可以尝试在图像上使用对象拟合,例如


object-fit: contain;

http://jsfiddle.net/ykw3sfjd/


或者,您可以添加特定于弹性的规则,在某些情况下可能会更好。


align-self: center;

flex: 0 0 auto;


查看完整回答
反对 回复 2019-11-14
?
慕标5265247

无需添加包含div。


CSS的“ align-items”属性的默认值为“ stretch”,这是导致图像拉伸到其原始高度的原因。将css的“ align-items”属性设置为“ flex-start”可解决您的问题。


.slider {

    display: flex;

    align-items: flex-start;  /* ADD THIS! */

}


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信