关于图片自适应的做法

最新推荐文章于 2024-06-13 19:04:45 发布

原创最新推荐文章于 2024-06-13 19:04:45 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #图片自适应 #前端 #padding布局 #css

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了通过CSS实现图片自适应的一种方法，利用padding垂直方向的百分比值根据父级宽度计算的特性，创建三层HTML结构，实现固定比例的图片容器。通过设置父级宽度、子级padding和图片定位，可以方便地创建如1:1比例的图片容器，兼容性良好，适合前端开发者使用。

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

前段时间在网上看了一篇关于图片自适应的文章，受益匪浅，“原来还有这种做法”！自己尝试了一遍，发现确实挺好用，所以把要点高压缩总结了一遍，分享给大家。

这种图片自适应做法主要利用的是padding垂直方向的百分比值是根据父级宽度计算的。

这种做法我们需要三层html结构，分别是最外层负责宽度的父级盒子，中间层是负责高度的子级盒子，最里面就是我们自适应宽高的图片。

//html
<div class="box">
    <div class="wrap">
        <img src="timg.jpg" alt="">
    </div>
</div>

样式方面，父级盒子设置宽度，子级盒子设置垂直方向padding、宽度100%就能实现出一个固定比例的盒子了。

比如我们要实现一个比例为1:1的容器，因为padding垂直方向的百分比值是根据父级宽度计算的， 所以我们设置子盒子的padding-top为100%就意味着padding的值等于父级盒子的宽度，而50%就是一半。

//style
.box{
    width:50px;
}
.wrap{
    padding:100% 0 0;
    position:relative;
    width:100%;
}
img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

不过我们需要注意，里面嵌套的图片需要使用定位，因为padding是占位的 。

这种做法不仅方便，兼容效果也很好，推荐大家使用。