CSS中如何保持容器宽高比不变的原理

padding-top 和 padding-bottom属性

padding-top 和 padding-bottom属性分别表示容器的上内边距与下内边距。
虽然设置的是垂直方向的高度，有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说，padding-top 和 padding-bottom的值为百分比时，其实表示的是其元素宽度的百分比。

因此，在容器宽度不确定的情况下(如: 80%, flex: 1等），保持容器宽高比不变，可以通过设置元素的padding-top或 padding-bottom值。

例如，保持宽高比为16:9：

.box {
   padding-top: 56.25%;
}

使用场景

这个在保持图片的宽高比时非常有用。

• img元素保持固定比例不变：

// mixins.less
.ibox(@width, @height) {
  .ibox-@{width}-@{height} {
    position: relative;
    padding-top: percentage(@height / @width);

    & > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

// 宽高比为：16:9
.ibox(16, 9)

// 宽高比为：4:3
.ibox(4:3)

• 背景图片保持固定比例：

// mixins.less
.ibox(@width, @height) {
  .ibox-@{width}-@{height} {
    position: relative;
    background-image: url('xxx.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: percentage(@height / @width);
  }
}

// 宽高比为：16:9
.ibox(16, 9)

// 宽高比为：4:3
.ibox(4:3)