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

一、方式一:

1、html

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

2、css

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

3、原理：

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

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

二、方式二

此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用

.aspect-ratio {
    aspect-ratio: 1/1; // 元素宽高比为1比1
}