css实现自适应正方形

中庸之为德也，其至矣乎

已于 2024-03-17 02:01:50 修改

阅读量403

点赞数 9

文章标签： css 前端 javascript

于 2024-03-17 02:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_45891146/article/details/136773861

版权

通过百分比（%）和宽高比
通过vw或者vh
通过百分比（%）+ padding-top 或者 padding-bottom
以上列举三种方法，还有其他方法请各路大神评论区展示

展示

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 20%;
      aspect-ratio: 1 / 1;
      background: #45b007;
    }
    .box1 {
      width: 50vw;
      height: 50vw;
      background: #111111;
    }
 
    .box3{
      width: 40%;
      padding-top: 40%;
      background: #c00909;
    }
  </style>
  <body>
    <!-- <div class="box"></div> -->
    <!-- <div class="box1"></div> -->
    <!-- <div class="box3"></div> -->
  </body>