使用calc（）根據縱橫比創建自動調整大小的元素？

Question

我有一個視頻容器，如果我可以使用calc來計算基於寬度的高度，那就太棒了。

有聲稱這樣的事情是可能的stackoverflow answers一些端倪：

.selector{ 
    width: 100%; 
    height: calc(width * 1.75); 
} 

但我還沒有看到在Chrome 26的工作我如何計算的身高只有使用CSS3？

Answer 1

目前CSS variables還沒有真正支持。我認爲他們work in WebKit。

如果您需要將其作爲變量，那麼您應該使用一些CSS預處理器，例如Sass，less或Stylus。

但我不確定是否真的需要寬度作爲變量。在任何情況下，在純CSS你需要的是對當下真正的價值：

div { 
    height: calc(100% * 1.75); 
} 

在未來，我們可以做這樣的事情：

div { 
    var-height: 100% 
    height: calc(var(height) * 1.75); 
} 

Answer 2

使用VH和VW單位是獲得一個固定的響應viewframe一個不錯的方法：

.sixteen-nine { 
    width: calc(75vh * 1.77); 
    height: 75vh; 
} 

這會給你相對於屏幕的高度視口約16：9。

Answer 3

有一種方法可以避開這種繞過使用calc（）的需要，我認爲我應該讓你意識到這一點。

您可以將高度設置爲零並使用填充，因爲它是相對於元素寬度創建固定比例。

.selector { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom:175%; 
} 

我經常使用這種技術來響應地顯示16：9的YouTube視頻。要做到這一點，所有你需要做的就是像這樣設置子元素 -

.selector .child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}