宽度自适应，高度不设，宽高按照图片宽高显示

最新推荐文章于 2024-09-08 09:55:18 发布

泰山小蚂蚁

最新推荐文章于 2024-09-08 09:55:18 发布

阅读量846

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/qq_34301849/article/details/90674036

css 专栏收录该内容

1 篇文章

订阅专栏

博客分享了在不使用JS的情况下，用CSS实现图片宽高比自适应显示的方法。列表中每行4个图片，元素宽为25%，图片宽高比1:2。通过给元素加padding - bottom值，根据父元素宽占比设置，再设置背景图，可让内容按图片宽高比自适应显示。

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

宽度自适应，高度不设，宽高按照图片宽高显示

最近遇到一个情况，列表中有好多个图片，每行4个；而每个元素的宽为25%，图片宽高比为1:2；
还有自适应，如何在不适用js的情况下，让图片能始终按照正常的宽高比显示呢？

之前使用过js，后来发现一个单纯用css就可以解决的方式，分享下！

	<div class="a"></div>
    <style media="screen">
      .a{
        width:30%;
        padding-bottom:60%;
        background: url("img.jpg") no-repeat;
        background-size: 100% 100%;
      }
    </style>

原理：通过给元素加一个padding-bottom的值来实现，这个值是根据其父元素宽占比来说的。
假设宽是30%，如果padding-bottom也设置30%，那么盒子宽高比就是1:1。
假如我们图片大小宽高比为1:2，则在宽设置30%的情况下，padding-bottom设置为60%，
再设置背景图即可，这样内容显示的宽高比就是1:2的图片，大小自适应；