在了解控制宽高比之前，首先要知道垂直方向的padding取百分比值是基于最近的块级祖先元素的宽度计算的。关于为什么这么计算可以去看知乎的这个提问：[CSS中margin-top/bottom(padding-top/bottom)百分比为何以最近的块级祖先元素的宽度而不是高度作计算？][1]

一、固定宽高比

<div class="column">
  <figure class="figure"></figure>
</div>
.column{
  max-width: 800px;
}
.figure{
  padding-top: 图片高度/图片宽度*100%
}

二、流动宽高比

流动宽高比就是固定宽高比的扩展，同样使用padding-top，只是计算方法是 图片高度变化/图片宽度变化*100%

三、背景图片的自动缩放 可以使用background-size:cover，cover 属性指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。 [1]: https://www.zhihu.com/question/20983035