CSS 图片宽度为100%时，如何设置图片的宽度和高度相等

1、html

<div class="img-wrap">
    <img :src="./img.jpg">
</div>

2、css

 .img-wrap {
    position: relative;
     100%;
    height: 0px;
    padding-top: 100%; // padding-bottom都可以
    img {
      position: absolute;
      top: 0;
      left: 0;
       100%;
      height: 100%;
    }
  }

3、原理：

外层div中，padding-top：100%; 这个padding-top中的百分百是根据width去计算的。所以padding-top拿到了跟width一样的大小，又通过padding去填充了容器的高度，所以实现了div宽度百分百，高度跟宽度一样大小；

内部img标签的position：absolute。使其成为块状元素，可以设置img宽高，均为外层div盒子的百分百，由此实现img宽度百分百，高度跟宽度一样大小