html - 没有js的固定纵横比和固定高度的元素

Question

我需要在我的应用程序中设置其中一个容器的样式，使其具有固定的纵横比并根据视口(viewport)宽度在宽度或高度上填充外部容器。而填充宽度就像设置一样简单

#myDiv{
  width:100%;
  padding-bottom: 50%
}

似乎没有任何明显的方法可以将高度设置为 100%，然后将内边距设置为 200%。如果不在 js 中使用边界框，这甚至可能吗？

Answer 1

根据我的理解，您可以尝试将视口(viewport)高度设置为另一个 css 属性。通过这样给予:

#mydiv{
width:100%;
height:100vh;
}

vh 表示将覆盖容器 t0 视口(viewport)高度的视口(viewport)高度。