javascript - CSS 保持给定高度的 div 纵横比

Question

我发现很多回答都可以回答这个给定宽度的问题。例如: Maintain the aspect ratio of a div with CSS

但是如果我需要设置

div{
  position: absolute
  bottom: 10px;
  top: 10px;
  padding-right: 125%;
}

这些解决方案不起作用。

当我将高度设置为如上时，如何保持 div 的纵横比？

Answer 1

这是一个使用视口(viewport)单位的解决方案。根据您的听众，这可能是也可能不是最佳解决方案。参见 http://caniuse.com/#feat=viewport-units了解详情。此外，根据您想要的宽高比，在某些情况下它会离开屏幕。我的下一个建议是将 JavaScript 加入其中。

这是您可以试用的 fiddle :http://jsfiddle.net/Lq7v2gcq/

还有重要的代码:

#vhtest {
    position: relative;
    top: 5vh;
    height: 90vh;
    width: 50vh;
    margin: 0 auto;
    border: 1px solid red;
}