在 Flexbox 中保持图像长宽比
在 CSS Flexbox 模型中,调整图像高度时保持图像比例可能是一个挑战。但是,有多种方法可以实现此目的。
对象适合属性
一种方法是在图像上使用对象适合属性。通过设置 object-fit: contains,图像将缩放以适合其目标容器,同时保留其宽高比。
Flex 特定规则
另一个选项是使用特定于 Flex 的规则:
- 设置align-self: center 以将图像在其父级中垂直居中
- 设置 flex: 0 0 auto 使图像的宽度和高度灵活,允许其根据需要缩小或扩展。
示例
这是一个演示两者的示例方法:
1 2 3 4 5 6 | <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>
|
登录后复制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .slider {
display: flex;
height: 200px;
}
.slider img {
margin: 0 5px;
object-fit: contain;
}
.slider img {
align-self: center;
flex: 0 0 auto;
}
|
登录后复制
此方法应该有效地保留图像的纵横比,即使在调整图像高度时也是如此。
以上是如何在 CSS Flexbox 中保留图像长宽比?的详细内容。更多信息请关注PHP中文网其他相关文章!