0
点赞
收藏
分享

微信扫一扫

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

做个橙梦 2023-02-18 阅读 95

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


  1. 使用 aspect-ratio 属性

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

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

  1. 使用 padding-bottom 属性

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

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

  1. 使用 vw 属性

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

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

}

举报

相关推荐

0 条评论