[css]容器固定宽高比的img处理

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%;
}

1 容器固定宽高比,img元素/背景图撑满(相当于cover)

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

    & > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
// 2-背景图
.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)

2 容器固定宽高比,最大化地装在里面(相当于contain效果)

如果图片大小超过容器,那就相当于contain;如果没有就展示自己的大小

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

    & > img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

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

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