html - CSS：如何使用 vw 和 vh 以 16/9 比例制作 div？

Question

我有以下设置：

#container {
  width: 100vw;
  height: calc(100vw / 1.77);
  display: block;
  background-color: black;
}

<div id="container">
</div>

我想始终保持 16/9 的纵横比。

但它不起作用！我错了什么？

标签： htmlcss

Answer 1

#container {
  display: block;
  width: 100vw;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  height: 56.25vw;
  /* height:width ratio = 9/16 = .5625  */
  max-height: 100vh;
  background-color: black;
}

<div id="container">
</div>