Fork me on GitHub

纯css实现保持div宽高比

保持 div 宽高比这个需求其实完全可以使用 css 完成,以 16:9 为例

1
2
3
<div class="container">
<div class="cover"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.container {
width: 200px;
height: 200px;
border: 2px solid gray;
resize: both;
overflow: auto;
}

.cover {
padding-bottom: 56.25%;
background: red url(https://i.loli.net/2020/02/28/MbkhTHzosq87XSG.jpg) no-repeat center / cover;
}

其中 padding-bottom: 56.25%; 是关键点,因为 css 中 padding 为百分比时是计算父元素宽度,所以 9 / 16 * 100 = 56.25

在线预览