css实现正方形div aspect-ratio 属性 (2022)

总结一下比较常见的css 实现DIV 正方形的方法。

1. 使用 aspect-ratio 属性

div {
  aspect-ratio : 1 / 1;
  width:50%;
  border:1px solid red;
}

<div>Aspect ratio : 1 / 1</div>

2. 使用 padding-bottom 属性

<div class="square"></div>

.square {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background-color: red; /* optional */

3. 使用 vw 属性

<div class="square"></div>

.square {
    width: 10vw;
    height: 10vw;
    background-color: red; /* optional */

}