CSS-长宽比和100％视口高度

Question

我正在尝试像这样将div的宽高比设置为纵向（9:16）。

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

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

这可以按预期工作，但是我现在要制作它，使其最大高度为视口的100％。

我正在尝试确保它完全适合屏幕，同时保持宽高比并且不引入滚动条。

我最好的方法是什么？

Answer 1

您将需要使用<script type="text/javascript" src="/livechat/livechat.js?_dc=s0m3l0ngcrypt1cv4r14bl3"></script> 的比率使用16/9 = 1.778 CSS函数来计算宽度

calc()

body {
  margin: 0;
}

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

Answer 2

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

height: 100vh;