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

最新推荐文章于 2023-08-09 15:04:37 发布

aben_sky

最新推荐文章于 2023-08-09 15:04:37 发布

阅读量3.4k

点赞数 1

文章标签：列表 css html python vue

本文链接：https://blog.csdn.net/aben_sky/article/details/123684331

版权

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