img图片在正方形的div中自适应缩放

1、图片自适应为img的100%自动缩放，首先先实现自动缩放的正方形div
本方案采用padding-top实现

<div class="img">
     <div class="absolute">
              <img class="img" :src="xxxxx" :alt="xxxxx">
     </div>
</div>

    .img { //正方形设置
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            position: relative;
            display: block;

            .absolute{ //绝对定位，设置图片居中
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                padding: 0;
                justify-content: center;
                text-align: center;
                display: flex;
            }

            img { //设置图片自适应
                max-width: 100%;
                max-height: 100%;
                padding: 0;
                width: auto;
                height: auto;
            }
      }

持续更新中...