TRY CODING FUN

重拾编程的乐趣

0%

css 固定宽高比

发表于 更新于 分类于
本文字数： 443 阅读时长 ≈ 1 分钟

需求

css 实现固定宽高比

实现

1
aspect-ratio: 16/9;

其他方式

1
2
3
<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

参考文章

相关文章