0

ブラウザー ウィンドウのサイズに応じてサイト コンテンツのルック アンド フィールを調整する必要があるプロジェクトのプロトタイプに取り組んでいます。

プロトタイプでは、サンプル画像を使用しています。ウィンドウの高さと幅に合わせて画像の高さと幅を調整したいと考えています。

私が使用しているコードは次のとおりです。

$(window).resize(function() {
   document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});

上記のコードは正しく動作しません。ユーザーがウィンドウのサイズを変更すると、画像の高さと幅を動的に変更したいと考えています。私もこのソリューションを実装しようとしました。しかし、それもうまくいきませんでした。どうすればこれを解決できますか？

4

3 に答える 3

1

これはテスト目的でのみ必要であり、jQueryを使用しているように見えるので、次のコードを試してください。

<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">

<script>
    var resize = function() {
        $("img").width($(window).width()).height($(window).height());            
    };
    $(window).resize(function() {
       resize();
    });
    resize();
</script>​

デモ: http://jsfiddle.net/GvRJ7/

それ以外の場合は、適切な HTML/CSS マークアップを使用して、デザインをあらゆる解像度に適合させることを強くお勧めします。

于 2012-05-07T10:31:30.880 に答える
0

window.innerHeightとwindow.innerWidthの代わりに、 percentageを使用してみることができます。これにより、ウィンドウの高さと幅に応じて画像のサイズが変更されます。

document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");
于 2012-05-07T10:27:37.720 に答える
0

発砲の頻度を考えてみてくださいwindow.resize()（疑問がある場合はconsole.log()）。カウンターのインクリメントや位置の計算など、安価な操作のみを内部で実行する必要があります。

あなたの特定のケースでは、100％の幅/高さの画像はCSS（または必要に応じてJavaScriptで生成されたCSS）だけを使用して機能すると思います。もちろん、これは画像が実際のサイズを超えると見栄えが悪くなり、実際のサイズを下回ると帯域幅が無駄になりますが、わずかな費用でコードと同等の効果が得られます。

補足として、document.write（）はめったに使用されるべきではありません。代わりにDOM操作関数を使用してください。

于 2012-05-07T10:27:44.957 に答える