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

这是使用视口单元的解决方案。根据您的受众，这可能是也可能不是最佳解决方案。有关详细信息，请参阅http://caniuse.com/#feat=viewport-units。此外，根据您想要的宽高比，在某些情况下它会脱离屏幕。我的下一个建议是将JavaScript融入其中。

这是您可以试用的小提琴：http://jsfiddle.net/Lq7v2gcq/

重要的代码：

$config['base_url']    = 'http://www.example.com/';