关于图片自适应的做法

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

这种图片自适应做法主要利用的是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是占位的 。

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