CSS之padding百分比实现等比例宽高响应式布局

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