CSS中图片宽度100%时如何根据图片宽度设置成比例的高度

原创
2022/03/22 14:55
阅读数 65

bootstrap中多端适配时, 列表中图片的高度不好设置 (总不能直接设置成一个固定的px值啊),这里提供了一个设置固定宽高比的方法。

本文内容参考自 https://www.cnblogs.com/tmxk-qfzz/p/11193724.html

HTML:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img src="1.jpg" >
        </div>
        <div class="col-4">
            <img src="2.jpg" >
        </div>
        <div class="col-4">
            <img src="3.jpg" >
        </div>
    </div>
</div>

CSS:

.item {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 100%; /* 这个值可以调成自己想要的比值, 比如4:3的话就设置75% */
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
}
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部