得到一個div的高度，以適應收縮後的寬度

在這裏的jsfiddle http://jsfiddle.net/H3VW5/我有3個div，其中寬度基於perencentage。有沒有一種簡單的方法（沒有圖像）來獲得高度以匹配某一縱橫比，這樣當窗口縮小時，高度會隨着寬度的縮小而保持相同的形狀？ IE瀏覽器。如果div大小是600px x 600px在60%和窗口收縮使寬度500px高度也會縮小到500px？得到一個div的高度，以適應收縮後的寬度

/*CSS:*/ 
 

 
.div1 {width:60%; height:400px; background-color:#066; float:left} 
 
.div2 {width:20%; height:400px; background-color:#09F; float:left;} 
 
.div3 {width:20%; height:400px; background-color:#C00; float:left;}

<!--HTML:--> 
 

 
<div class="div1"></div> 
 
<div class="div2"></div> 
 
<div class="div3"></div>

來源

2013-08-22 Blake Bowman

有一個很好的把戲描述here它可以爲您解決。

基本上，您只需將寬度設爲auto（不指定px高度），並使用padding-bottom以百分比（％）表示。整齊。

來源

2013-08-22 19:44:31 fred02138

這是一個小提琴：http://jsfiddle.net/fred02138/H3VW5/1/ – fred02138

解決它，謝謝！ –

除了我必須把一個div放在60％的寬度內以便寬度可以是100％，那麼填充將會對應於ie。如果填充底部爲100％，那麼它將保持正方形。 –

如何設置你的body和html一個height和width，然後改變你的div的高度，以百分比？這允許您然後在您的div上設置相對液體高度，因爲現在他們有一定的尺寸。

body, html { height: 100%; width: 100%; } 

.div1 {width:60%; height:40%; background-color:#066; float:left} 
.div2 {width:20%; height:40%; background-color:#09F; float:left;} 
.div3 {width:20%; height:40%; background-color:#C00; float:left;}

JSfiddle link

來源

2013-08-22 19:35:18 kunalbhat

使用此方法，如果它們不按比例縮小瀏覽器，則div的縱橫比不會保持不變。 –

您可以使用jQuery來控制的div的高度

$(".ratio").each(function() { 
    var height = $(this).width(); 
    console.log(height); 
    $(this).css('height',height + 'px'); 
});

鏈接：http://jsfiddle.net/gwx6y/

來源

2013-08-22 19:50:11

這是我來了。唯一不哈克的方式是保持良好的形象。因此，如果改變標記有點：

<div class="wrapper"> 
    <img src="bigimage.jpg" /> 
    <div class="div1">a</div> 
    <div class="div2">b</div> 
    <div class="div3">c</div> 
</div>

並設置最大寬度：100％;圖像的高度將會改變，所以它保持了原始的寬高比。因此，我們可以使用它並絕對定位div，將適當的寬度和高度設置爲100％。圖像的尺寸在這裏領先。包裝採取相同的大小，因爲divs是相同包裝的孩子，他們的高度也是相同的。

CSS：

.wrapper { 
    width: 100%; 
    position: relative; 
} 
.wrapper img { 
    position: relative; 
    max-width: 100%; 
    z-index: 1; 
    display: block; 
    opacity: 0; 
} 
.div1 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width:60%; 
    background-color:#066; 
    z-index: 2; 
} 
.div2 { 
    position: absolute; 
    height: 100%; 
    left: 0; 
    top: 0; 
    left: 60%; 
    width:20%; 
    background-color:#09F; 
    z-index: 3; 
} 
.div3 { 
    position: absolute; 
    height: 100%; 
    left: 0; 
    top: 0; 
    left: 80%; 
    width:20%; 
    background-color:#C00; 
    z-index: 4; 
}

我的解決方案的例子可以在這裏找到： http://jsfiddle.net/krasimir/H3VW5/3/

附：這種方法的好處是你可以保持你想要的任何比例。你所要做的就是創建一個具有該比例的圖像。

來源

2013-08-22 20:05:38 Krasimir

得到一個div的高度，以適應收縮後的寬度

回答

相關問題