如何用css做出固定比例的百分比宽度img

工作中遇到这种场景：百分比宽度的img，高度定在宽度的80%，如何做呢？

// html
 <div class="textImg">
    <img src="../assets/text_img2.png" />
 </div>

// css
.textImg {
  position: relative;
  margin: 0 auto;
  width: 80%;
}
.textImg:before {
  content: "";
  display: block;
  padding-top: 80%;
  background-color: black;
}
.textImg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

首先先居中对齐一个div，设置宽度但不设置高度。
再使用伪元素的padding-top 撑起高度，这里的padding-top的百分比是基于div本身的宽度算的。这样就能获得一个长宽比5：4的的容器。
然后再用absolute将图片填满容器就可以了。