CSS3 Flexbox保持图像宽高比?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (188)

如何强制图像保持其纵横比?

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;
}
提问于
用户回答回答于

对于img标签,如果你定义一边,那么另一边的大小将保持高宽比,默认情况下图像展开为原始大小。

使用这个,将每个img标签包装到div标签中,并将其宽度设置为父div的100%,那么高度将根据你想要的高宽比进行设置。

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}
用户回答回答于

你可以尝试在图像上使用物体贴合,例如

object-fit: contain;

或者你可以添加规则

align-self: center;
flex: 0 0 auto;

扫码关注云+社区

领取腾讯云代金券