如何实现div保持一定的比例进行缩放

效果：

代码：

布局部分

  <div class="img-container">
    <img src="../../../static/image/test.png">
  </div>

样式部分（width和padding-top设置为相同的值即可保持长宽比例1：1）

.img-container {
  position: relative;
  width: 50%;
  padding-top: 50%; //调整图片比例

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}