CSS margin和padding属性的百分比值都是相对于宽度计算的
在一个普通的两栏产品列表，要实现图片占位区域等比例缩放，图片居中显示，利用padding百分比值完美解决自适应问题。
<ul class="list">
<li>
<span class="imgbox">
<img src="">
</span>
</li>
</ul>
.list li{
float: left;
width: 50%;
.imgbox{
position: relative;
dispaly: block;
padding: 133.33% 0 0;
background: red;
img{
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}
}
以上代码所示，无论是哪个屏幕大小，图片占位红色区域宽高比都是3:4，图片居中显示。
Animation.gif
网友评论