CSS - 纵横比和 100% 视口高度答案

【问题标题】：CSS - Aspect Ratio and 100% viewport heightCSS - 纵横比和 100% 视口高度
【发布时间】：2018-12-18 07:09:44
【问题描述】：

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

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

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

这是按预期工作的，但我现在想要使它的最大高度为视口的 100%。

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

我最好的方法是什么？

【问题讨论】：

标签： css

【解决方案1】：

我建议然后使用vh 单位作为高度。

height: 100vh;

【讨论】：

【解决方案2】：

您需要使用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>

【讨论】：