確保元素保留指定的高寬比

Question

是否有指定CSS中的寬高比（例如4：3或16：9），然後讓div（容器）塊適合當前窗口的寬度和高度？

一個非常簡單的問題，希望它有一個相對簡單的答案。

編輯：那些仍然有興趣實現這一目標只用樣式將是引導的responsive helpers類的一個很好的例子。

Answer 1

爲此，我擔心你會需要一些JS。我用jQuery的位置：

function preserveAspect() { 
    var scaled = $("#scaled"); 
    scaled.height("100%"); 
    scaled.width("100%"); 
    scaled.css("box-sizing", "border-box"); 
    var ratio = 16/9; 
    var w = scaled.outerWidth(); 
    var h = scaled.outerHeight(); 

    if (w > ratio*h) { 
    scaled.width(ratio*h); 
    // horizontal centering is done using margin:auto in CSS 
    } else if (h > w/ratio) { 
    var newHeight = w/ratio; 
    scaled.height(newHeight); 
    // for vertical centering: 
    scaled.css({marginTop: ($("body").height()-newHeight)/2}); 
    } 

} 
$(document).ready(function() { 
    preserveAspect(); 
    $(window).resize(preserveAspect); 
}); 

說明：

1. 首先，我們擴展我們的股利100％的寬度和高度，讓我們知道它有多大的空間了。
2. 然後我們看看它是否太寬，這意味着寬度比高度倍數比更多 。
   • 如果是這樣，更改寬度。身高已經達到100％。
   • 否則它可能會太高，在這種情況下，我們希望比例尺的寬度除以。要垂直居中，我們使用margin_top設置爲（window_height - element_height）/ 2.
3. 如果兩個規則均不適用，則div已經正確縮放。
4. 最後，我們添加事件偵聽器，用於文檔何時完全加載以及何時改變窗口大小。

完整的代碼和工作示例這裏： http://jsbin.com/efaRuXE/5/

Answer 2

找到了一種方法。這可能很難，但它應該讓你去。將元素的高度設置爲零，然後使用填充百分比。

jsFiddle example

例如，4：3：

div { 
    height: 0; 
    padding-bottom: 75%; 
    background: #999; 
} 

例如，16：9

div { 
    height: 0; 
    padding-bottom: 56%; 
    background: #999; 
} 

Answer 3

不幸的是沒有。

我在WWW上的樣式提出一次WG @ W3C建設這樣的：

div { 
    width: 50%; 
    height: width(56.25%); /* 16:9 ratio */ 
} 

但是從瀏覽器廠商沒有一個人表示在那一刻任何利息。

無論如何，上述解決方案只允許定義箱子的比例。但CSS使用的佈局模型不允許以聲明方式定義刻寫。

Answer 4

這個問題現在是幾個星期了，但有是純CSS的方式來做到這一點。感謝Danield使用它來回答this question。它使用大衆和VH單位，像這樣：

#wrapper { 
    height:75vw; 
    max-height:100vh; /* max-height/height = aspect ratio */ 
    width:100vw; 
    max-width:133.3333vh; /* max-width/width = aspect ratio */ 
    position:absolute; 
} 

的壞消息是，support is iffy in current mobile browsers and in IE before version 11。