將div的高度設置爲任意寬度的一半

如何根據用戶屏幕大小改變div的高度，使寬度根據用戶的屏幕大小而改變？將div的高度設置爲任意寬度的一半

，我有以下設置一個div ...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:400px; 
    background-color:red; 
}

寬度工作在這個罰款，它鎖定在400個像素，如果屏幕過於狹窄，也停止在1200個像素，如果擴大屏幕變得太大。但是，我也希望高度在任何時候都變成寬度的一半。類似...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:width/2; 
    background-color:red; 
}

這沒有奏效（我並不真正期待它）。

如果可能的話，我寧願使用CSS，但是因爲如果用戶也手動調整互聯網窗口的大小（比如當前的寬度），我也希望更改高度。我不確定使用CSS是否可行，但是，如果有一種方法可以通過Jquery實現，我也很樂意使用它。

jsFiddle of the above for reference.

誰能幫助我？

來源

2013-07-16 Flickdraw

如果你確定有只支持現代瀏覽器，你可以這樣做：http://jsfiddle.net/kNPfh/

大衆措施是在1/100的寬視的，所以50vw是屏幕寬度的50％。

<div class='halfwidth'></div> 

.halfwidth { 
    width: 100%; 
    height: 50vw; 
    background-color: #e0e0e0; 
}

如果沒有，你可以使用：http://jsfiddle.net/ff7WC/

$(window).on('resize', function() { 
    $('.halfwidth').height($(this).width()/2); 
}).resize();

來源

2013-07-16 08:59:30

做了一些修改，以這一點，它的工作原理就是我想要的。 http://jsfiddle.net/R5WqL/謝謝！出於好奇，哪些版本的IE支持第一種選擇？ – Flickdraw

np，IE v9.0 +支持'vw' ...這裏是[支持圖表]（http://caniuse.com/viewport-units） –

太好了，謝謝你提供的信息。 – Flickdraw

這對純CSS來說是不可能的。你必須使用jQuery來製作新的尺寸。我在SO中發現了這個：Using jQuery To Get Size of Viewport

來源

2013-07-16 08:52:07

你可以在父項的填充的幫助下做到這一點，因爲相對填充（甚至是高度方向）基於元素的寬度。

CSS：

.imageContainer { 
    position: relative; 
    width: 25%; 
    padding-bottom: 25%; 
    float: left; 
    height: 0; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
}

有關詳細信息，請參閱主題 http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

本文中，您還可以使用jQuery的是，像這樣：

$('.ss').css('height',width()/2);

請選擇這個作爲如果通過點擊左側的勾號符號來解決您的疑問，則爲正確答案。

來源

2013-07-16 08:53:52

確保你有一個js文件，然後使用這個

$(window).load(function(){ 
    $('.element').height($('.element').width()/2); 
    $(window).resize(function(){ 
     $('.element').height($('.element').width()/2); 
    }); 
});

http://jsfiddle.net/Hive7/8CNtU/2/

來源

2013-07-16 09:07:29

將div的高度設置爲任意寬度的一半

回答

相關問題