如何用css做一个正方形（自适应屏幕宽度）

DOM结构

<div class="img-container">
   <div class="img-box">
      <img src="xxx" />
   </div>
</div>

css / less

.img-container {
      position: relative;
      width: 40%;
      height: 0px;
      padding-top: 40%;
      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }