javascript - DIV のサイズを変更しますが、ウィンドウのサイズ変更時に縦横比を維持します

Question

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

ソリューションに Javascript が必要な場合は問題ありませんが、jQuery は使用したくありません。

Answer 1

css で width:50% を使用し、サイズ変更には window.onresize イベントを使用します。見てみる

http://jsfiddle.net/536UJ/

Answer 2

CSSで1つのプロパティ（高さ）を他のプロパティ（幅）と等しくできるかどうかはわかりません...少なくともCSS2では。

ただし、もちろん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% に設定できます。高さを調整するだけです-

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