调整div宽度相对于其高度以保持纵横比

Question

我想.center通过4:3纵横比(每3个高度4个宽度)和高度保持div的宽度相对于它的高度100%; 然后水平对齐div的中心.

就像你在这里看到的flash应用程序一样.

这就是我所拥有的:

HTML:

<div id="stuff" class="center" width="800" height="600"> 
     <canvas id="someHTML5">You cant play HTML5</canvas>
</div>

CSS:

.center {
    position: absolute;
    left: 50%;
    width: 800px; /* how do I make this relative; i want: pseudo code: width: height/3*4; */
    height: 100%;
    margin-left: -400px; /* -width/2 for horizontal alignment */
    z-index: 100;  
}

我还有一个JavaScript循环来集成JavaScript端更新.

Answer 1

由于width框的内容应相对于其更改height,因此可以使用vh 视口相对长度作为width属性的值.

来自规格:

视口百分比长度相对于初始包含块的大小.当初始包含块的height或width更改时,它们会相应地缩放.

VH单元
等于1%的height包含块的初始的.

干得好:

.center {
    position: absolute;
    left: 50%;
    width: 133.33vh; /* 100 * 4/3 ratio */
    height: 100%;
    margin-left: -66.66vh; /* width / 2 */
    z-index: 100;
}

工作演示.

值得注意的是vh,IE9 +支持vw视口百分比长度.

浏览器兼容性

_{致谢:Mozilla开发者网络}