padding-top 和 padding-bottom屬性

padding-top 和 padding-bottom屬性分別表示容器的上內(nèi)邊距與下內(nèi)邊距。
雖然設置的是垂直方向的高度，有意思的是當該值為一個百分比的時候表示的是和本身包含的元素的寬度有關。
換句話就是說，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)