CSS: how to use vw and vh to make div in 16/9 ratio? [duplicate]

Question

I have the following setup:

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

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

I want to maintain always 16/9 aspect ratio.

But it isn't working! What am I wrong ?

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>