自适应纯CSS图片宽度高度始终保持比例
- 799
自适应例如九宫格，图片或者DIV特别是图片宽度100%，如何让高度也能始终保持一个比例？避免出现高低不齐的现象！
1、利用JS控制，监听图片的宽度，再设置图片的高度
2、纯CSS设置图片宽度和高度始终保持比例
2.1、原理：利用padding-top（padding-bottom）的百分比计算是根据层宽度的宽度计算的，如层宽度100px，padding-top:20%就是20px；设置一个外层padding-top（padding-bottom）的空白空间，让内层去填充！如设置一个始终保持正方形的图片，将父层设置padding-top（padding-bottom）100%，宽度100%，高0，得到一个正方形空白空间，内层图片标签img设置position：absolute浮动左0，顶部0，高度100%，宽度100%（图片的高度宽度百分比是根据父层计算！） 填满父层padding出来的正方形空白空间！
2.2、实例：给img加一个父层imgbox
<div class="imgbox">
<img src="imgurl">
</div>2.3、添加CSS
.imgbox{
position: relative;
width: 100%;
height: 0px;
padding-top: 100%; //padding-bottom都可以
}
.imgbox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}声明：博客中如无特殊说明或标注的文章均为博客原创文章，部分文章来源互联网，如有侵犯您的版权，或者对零分博客发布的文章有异议，请来信告知删除、修改，如您有好的建议或者意见也可以来信，谢谢！
请TA喝杯水^_^
如本文“对您有用”，欢迎随意打赏，让我们坚持创作！
请TA喝水![]()
