保持宽高比的宽度自适应盒子

Posted 2020-10-12 等风来

基本原理

元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。

使用场景

通常用在图片宽度自适应，并且需要保持高宽比的地方，例如商品列表页面。示例代码如下：

<div class="imgc">
    <img src="...">
 </div>

.imgc {
  width: 100%;
  position: relative;
  padding-top: 75%;
   > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
}

或者

.imgc {
    padding: 0 50% 66.66% 0;
}