「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

  今天在做公众号图片上传展示的时候，领导要求图片必须以正方形的方格展示，且图片在方格内居中。那么如何实现自适应的正方形。

     <style>
      .test{
        width: 200px;
        border: 1px solid #333;
      }
      .squale{
        background: red;
        position: relative;
      }
    </style>
    <div class="test">
      <div class="squale">
          <img src="">
      </div>
    </div>

固定宽高

      .squale{
        width: 100px;
        height: 100px;
      }

自适应高度

  但是移动端由于手机屏幕大小不一，固定宽高肯定不太适合。借助百度大神，让我重新认识了css padding属性。padding属性中的百分比是根据父元素的宽度来计算的。如此一来，我们可以通过设置padding的百分比来撑开高度，使高度等于宽度。

      .squale{
        width: 50%;
        height: 0;
        padding-bottom: 50%;
      }

自适应高度设置最大高度

  如果我们需要对正方形设置最大高度，以上的方法就不在适合了，max-height只能够限制height的高度，不能够限制padding的值。此时我们可以借助设置css伪元素的高度来撑开父元素的高度，并且对父元素设置最高高度来实现该效果。

      .squale{
        width: 50%;
        max-height: 80px;
      }
      .squale::before{
        content: '';
        height: 0;
        padding-top: 100%;
        display: inline-block;
      }

img图片自适应大小

  图片的大小很多时候取决与图片本身，正常情况下上传的图片自身大小是大于我们所提供的显示范围的且其本身的横竖排版并不是一致。所以在展示的时候，我们需要对图片的大小做出限制，以免超出显示范围，或者图片变形严重。

  基于以上要求，我考虑设置图片的最大宽度和最小高度，并设置图片等比缩放来实现图片的宽高的自适应性。

img{
    max-width: 100%;
    max-height: 100%;
}

img居中显示

  图片居中展示借用相对定位和translate来实现。首先通过相对定位来实现元素左顶点位于父元素的中心位置。再通过translate的百分比是相对于元素自身的宽高取值的特点，实现图片的中心和父元素的中心相叠加。

img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

• 效果展示