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

一尘不染

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

html

使用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;
}

阅读 240

2020-05-10

共1个答案

一尘不染

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

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

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

2020-05-10