我想保留.center div的寬度相對於其高度4:3長寬比（4寬度/ 3高度）和高度100%;然後水平對齊div的中心。調整div寬度相對於其高度來保持寬高比

就像你可以看到一個Flash應用程序here。

這是我有：

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端更新。

來源

2014-03-12 user3412531

可能重複（http://stackoverflow.com /問題/ 114543 /如何到中心-A-DIV-IN-A-DIV-水平） – Stratus3D

由於箱的width應相對於其height被改變，你可以使用vhviewport relative length爲width屬性的值。

從Spec：

視口百分比長度的相對於包含塊初始的尺寸。當包含塊的初始的height或width發生更改時，會相應地縮放它們。

VH單元
等於包含塊的初始的height的1%。

在這裏你去：

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

WORKING DEMO。

值得注意的是，vh,vw視口百分比長度are supported in IE9+。

瀏覽器兼容性

enter image description here

_{學分：？如何在一個div居中DIV - 水平] Mozilla Developer Network}

的

來源

2014-03-12 20:36:19

調整div寬度相對於其高度來保持寬高比

回答

瀏覽器兼容性

相關問題