CSS 固定宽高比

需求

css 实现固定宽高比

实现

aspect-ratio: 16/9;

其他方式

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

参考文章

• 面试官：CSS 如何实现固定宽高比？
• https://stackoverflow.com/questions/49901814/css-maintain-aspect-ratio-not-working