CSS 实现高度与宽度间的自适应

在不使用 JS 的前提下实现元素高度的自适应。

当一个图片的容器未设定高度时，就会出现未加载时容器塌陷、加载过程中高度变化引起闪烁等情况。为此需要给容器一个高度，但是当宽度不固定时，一个固定的高度往往会使得图片展示变形，因此要求高度能够随着宽度的改变而改变，下面介绍的是利用 padding 撑开容器进行占位，间接实现设置容器高度的方法。

原理

padding 设置为百分比时相对的是父元素的宽度，通过设置容器的 padding-top 属性将其撑开，容器的高度便能和宽度实现一定比例的自适应。

实例

假如需要模仿淘宝的搜索结果页面，左侧小图是页面宽度的 30%，小图为宽度和高度相等的正方形。

首先创建一个小图的容器。

<div class="box" />

小图（box）宽度为父元素的 30%，宽度和撑开的高度若要相等，则 padding-top 的值就等于 30%，至于图片的展示，可以采用 background 属性或者将<img/>标签设置为绝对定位的方式进行填充。

.box{
  position:relative;
  width:30%;
  overflow:hidden;
  padding-top:30%;
  background:url('https://via.placeholder.com/200x200');
}

优化

上述代码的缺点是：无法通过 max-height 来限制容器的最大高度。因为通过 padding 的方式实现，容器的高度始终是 0px，所以需要通过设置伪元素 padding 的方式来使容器有真正的高度。

.box{
  position:relative;
  width:30%;
  overflow:hidden;
}
.box-fillup{
  content:'';
  display:block;
  padding-bottom:30%;
}