CSS 移动开发中更好的图片自适应

阅读(1721)

** html **

<div class="pic-wrap">
    <img src="http://ww3.sinaimg.cn/mw690/69243898gw1emmeiydzvrj20go08cglu.jpg" alt=""/>
</div>

** css **

.pic-wrap{position: relative; padding-top: 50%;}
.pic-wrap img{position: absolute; left: 0; top: 0; width: 100%; max-width: 640px;}

此方法依赖于一定的结构,因为 padding 的百分比值是相对于宽度的,所以利用 padding-top 设置与宽高等比的百分比值占位,就实现了图片等比缩放的自适应效果。

计算公式: padding-top: 图片高度 * 100% / 图片宽度。

测试链接: http://jsbin.com/cexazepuvi/1/

Tags: