0

ウィンドウ サイズに基づいて iframe をスケーリングしようとしています。iframe を通過するのは、1600px x 900px の html5 ゲームです

以下のスクリプトを使用してゲームをスケーリングしたので、多くのことができることがわかりました。以下のコードはゲームを小さなボックスにレンダリングしますが、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>

参考までに、私はゲーム アーティストであり、クエスト ダイアログやその他の小さなゲーム機能にコード (javascript/css/html) のみを使用しています。私は現在、このプロジェクトに取り組んでいる最後の 1 人であり、この機能をゲームに実装するように要求されました。

どんな助けでも大歓迎です！

4

3 に答える 3

5

jQueryを使用して、このようにします

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

注: これは iframe の幅を 1600 ピクセルにするのではなく、単純に全幅にし、高さを幅に 9/16 を掛けたものにします。つまり、16:9 のアスペクト比を維持します。

于 2012-02-28T15:56:39.110 に答える
1

毎回ウィンドウの高さと幅に合わせて 16:9 の比率を維持することはできません。これは数学的に不可能です。16:9 の比率を一定に保ちたい場合は、ウィンドウの幅または高さを取得し、反対側のサイトを適切な値にスケーリングして、比率を維持することができます。

IE ウィンドウのサイズが幅 800 ピクセル、高さ 600 ピクセルに変更され、ウィンドウの幅を完全に維持したい場合は、ボックスの高さを 450 ピクセルにスケーリングして 16:9 の比率を維持する必要があります。

于 2012-02-28T15:34:09.823 に答える
0 
<iframe src="game.html" width="100%" height="100%" scrolling="no"></iframe>
于 2012-02-28T15:27:22.167 に答える