css：使用一个div实现一个自适应的正方形？抖音页面上，随着屏幕宽度的缩放，div元素会一直保持一定的宽高比，这里的高

问题：请使用一个div实现一个自适应的正方形？

动画.gif

只需要将padding-top的值和width的值保持一致就行，或者设置aspect-ratio: 1;

抖音页面上，随着屏幕宽度的缩放，div元素会一直保持一定的宽高比，这里的高度一直是宽度的75%

动画.gif

高度 = 父元素内容宽度 * 75%

设置padding-top或padding-bottom为75%即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./test.css" />
    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .wrapper {
        width: 45%;
        border: 1px solid;
        padding: 20px 30px;
      }
      .inner {
        width: 100%;
        background-color: greenyellow;
        padding-top: 75%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="inner"></div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner"></div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner"></div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner"></div>
        <p>描述文字</p>
      </div>
    </div>
  </body>
</html>

效果：

动画.gif

另一个思路：利用图片自适应宽高来撑开父级元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./test.css" />
    <style>
      * {
        box-sizing: border-box;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .wrapper {
        width: 45%;
        border: 1px solid;
        padding: 20px 30px;
      }
      .inner {
        width: 100%;
        background-color: greenyellow;
        /* padding-top: 75%; */
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="inner">
          <img src="./1.jpeg" alt="" />
        </div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner">
          <img src="./1.jpeg" alt="" />
        </div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner">
          <img src="./1.jpeg" alt="" />
        </div>
        <p>描述文字</p>
      </div>
      <div class="wrapper">
        <div class="inner">
          <img src="./1.jpeg" alt="" />
        </div>
        <p>描述文字</p>
      </div>
    </div>
  </body>
</html>

效果：

动画.gif

1.jpeg