CSS维持给定高度的div宽高比 [英] CSS maintain div aspect ratio given height

问题描述

我发现很多回答都是根据宽度来回答这个问题。例如：
使用CSS维护div的宽高比

I've found many responses that answer this question given a width. For example: Maintain the aspect ratio of a div with CSS

但如果我需要设置

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

这些解决方案不起作用。

those solutions do not work.

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

How can I maintain the div's aspect ratio when I have the height set as above?

推荐答案

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

Here's a solution using viewport units. Depending on your audience, this may or may not be the best solution. See http://caniuse.com/#feat=viewport-units for details. Also, depending on the aspect ratio you want, it will go off the screen in some cases. My next suggestion would bring JavaScript into the mix.

这是一个你可以尝试的小提琴： http://jsfiddle.net/Lq7v2gcq/

Here's a fiddle you can try out: http://jsfiddle.net/Lq7v2gcq/

重要代码：

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

这篇关于CSS维持给定高度的div宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！