ウィンドウのサイズを変更するiframeのサイズを変更する

ウィンドウのサイズに基づいてiframeを拡大しようとしています。 iframeを経由すると、1600px x 900pxのhtml5のゲームになりますウィンドウのサイズを変更するiframeのサイズを変更する

私はゲームをスケールするために以下のスクリプトを使用しています。下のコードはゲームを小さなボックスにしていますが、16：9のアスペクト比を維持しながら、ウィンドウに合わせて拡大する方法はありますか？

<head> 

<style type="text/css"> 

    .tab{ 
     position:relative; 
     width:265px;170px; 
    } 
    .tab iframe{ 
     position:relative; 
     -webkit-transform: scale(0.3, 0.29); 
     -moz-transform: scale(0.3, 0.29); 
     transform: scale(0.3, 0.29); 
     -moz-transform-origin:0 0; 
     -webkit-transform-origin:0 0; 
     transform-origin:0 0; 
     position:relative; 
     z-index:90; 
    } 
    </style> 
</head> 

<body> 

    <div id="tab0" class="tab"> 
     <iframe src="game.html" width="1600" height="900" scrolling="no"></iframe> 
    </div> 

</body>

は、参考のために私は、ゲーム作家午前のみクエスト対話や他の小さいゲームの特徴のために（ジャバスクリプト/ CSS/HTML）コードを使用しています。私は現在、プロジェクトに取り組んでいる最後の人です。この機能がゲームに実装されることが求められました。

ご協力いただければ幸いです！

出典

2012-02-28 Sonnyjim

<iframe src="game.html" width="100%" height="100%" scrolling="no"></iframe>

出典

2012-02-28 15:27:22

あなたは毎回の窓の高さと幅に拡張し、16の比率維持することはできません：9を、それが可能な数学的ではありません。 16：9の比率を一定に保つには、ウィンドウの幅または高さをとり、比率を維持するために反対側のサイトを適切な値に調整します。

I.E.あなたのウィンドウは800pxの幅と600pxの高さにリサイズされ、ウィンドウの幅を完全に保持したい場合は、比率を16：9に保つためにボックスの高さを450pxにスケーリングする必要があります。

出典

2012-02-28 15:34:09

入力いただきありがとうございます。私はそれをWindowsの幅に基づいて計画しています。私の質問ではっきりするためには、現在のウィンドウのサイズにかかわらず、1600px x 900pxでゲーム/ iframeの解像度を維持することが可能ですか？ – Sonnyjim

@Sonnyjim実際には、幅と高さの両方を考慮する必要があります。 Svenの例では、ウィンドウの高さが450ピクセル未満の場合は、iframeの高さとして取得し、そこから幅を計算する必要があります。 –

jQueryを使用すると非常に簡単に実行できます。次に、resize（）関数があります。ロード時およびウィンドウのサイズ変更ごとに、新しい幅を計算する必要があります。高さの公式は（ボックス幅* 9/16）となります。そして、あなたは100％の幅に設定して、毎回フルウィンドウの幅にすることができます。 –

私はjQueryの

を使用して、このようにそれを行うだろう

$(document).ready(function(){ 
    $('iframe').attr('width',$(window).width()); 
    $('iframe').attr('height',($('iframe').attr('width') * (9/16))); 
})

注：これは1600個のピクセルの幅のiframeをしない、それは単にそれ全幅を行い、幅=高さになります16：9のアスペクト比を維持します。

出典

2012-02-28 15:56:39 daveyfaherty

ウィンドウのサイズを変更するiframeのサイズを変更する

答えて

関連する問題