CSS - 宽高比和 100% 视口(viewport)高度

Question

我正在尝试像这样将 div 的纵横比设置为纵向 (9:16)..

.ratio {
  position: relative;
  height: 0;
  width: 100%;
  background: teal;
  padding-bottom: 177.77%;
}

<div class="ratio">
  16:9
</div>

这按预期工作，但我现在想让它的最大高度为视口(viewport)的 100%。

我试图确保它完全适合屏幕，同时保持纵横比而不引入滚动条。

我最好的方法是什么？

Answer 1

您将需要使用 16/9 = 1.778 的比率来使用 calc() css 函数计算宽度

body {
  margin: 0;
}

.ratio {
  position: relative;
  height: 100vh;
  background: teal;
  width: calc(1.778 * 100vh);
  margin: auto;
}

<div class="ratio">
  16:9
</div>