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

CSS margin和padding属性的百分比值都是相对于宽度计算的

在一个普通的两栏产品列表，要实现图片占位区域等比例缩放，图片居中显示，利用padding百分比值完美解决自适应问题。

  

    
      
    
  


.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