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

aben_sky

于 2022-03-22 14:55:00 发布

阅读量3.9k

点赞数 1

文章标签：列表 css html python vue

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

版权

在Bootstrap布局中处理多端适配时，为列表中的图片设置固定宽高比是一个挑战。传统的px值设置并不理想。本文提供了一种解决方案：通过CSS的padding-bottom属性和position相对定位，实现图片的自适应比例。具体做法是将图片容器的高度设为0，然后使用padding-bottom设置比例，如设置为100%实现1:1比例。同时，图片使用absolute定位并设置object-fit: cover确保填充整个容器。这种方法灵活且适用于不同尺寸的屏幕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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