DIVのサイズを変更しますが、ウィンドウのサイズが変更されたときに縦横比を維持します

Question

私のページにDIV要素があり、ウィンドウのサイズ変更時にサイズを変更したいが正方形の縦横比を維持します。幅をブラウザの幅の50％、高さを幅と同じにしたい。これどうやってするの？

ソリューションにはJavascriptが必要ですが、jQueryを使用しないことをお勧めします。私はもちろん、あなたがCSSに1財産その他の財産に等しい（高さ）（幅）を作ることができるか分からない...よく、少なくともCSS 2.

しかし、あなた

Answer 1

使用幅を調整する必要があります。見た目

http://jsfiddle.net/536UJ/

Answer 2

はJavaScriptでこれを行うことができます。

<div id = "myDiv"></div> 
<script> 
    document.onresize = function() { 
     var element = document.getElementById('myDiv');  // the element 
     var size = Math.floor(window.innerWidth/2) + 'px'; // 50% window width 

     element.style.width = size; // set the width 
     element.style.height = size; // set the height 
    }; 
</script> 

window.innerWidth性がIEに存在しないことに注意してください。そこには、document.documentElement.clientWidthを使用する必要があります。

Answer 3

cssでウィンドウの幅を50％に設定できます。 50 CSSの％とリサイズのためのwindow.onresizeイベント： あなただけheight-

window.onresize=function(){ 
    var who= document.getElementById('divtoresize'); 
    who.style.height=who.offsetWidth+'px'; 
}