1

プロジェクトのロゴを Web ページの上部に配置したいと考えています。ロゴは SVG 形式で、デフォルトのサイズは 1280x256 ピクセルです。ウィンドウのサイズが変更されたときに、この画像のサイズを変更したいと考えています。これどうやってするの？jQuery が必要ですか、それとも単純な JavaScript で実行できますか?

4

1 に答える 1

1

実際には、それを達成するための多くの方法があります。どちらを選択するかは、どのような動作をしたいかによって異なります。imgいくつかの例 (あなたが IDを持っていると仮定image):

1. 相対サイズを使用した CSS:

#image { width: 10%; }

画像は常に画面幅の 10% で、自動的に調整されます。

2. メディア クエリを使用する CSS:

#image { width: 100px; }
@media (min-width: 600px) {
    #image { width: 300px; }
}

画面の幅が 600 ピクセルを超える場合、画像の幅は 300 ピクセルになり、それ以外の場合は 100 ピクセルになります。幅は自動的に調整されますが、新しい値に「ジャンプ」します。

3.jQuery:

$(window).resize(function(){
    var w = $(window).width();
    $("#image").width(w * 0.1);
});

これは例 #1 と同じです。必要に応じて JS で独自の計算を行うことができるため、このソリューションは CSS よりも柔軟であることに注意してください (ただし、サイズ変更が遅くなる可能性があります)。#4も同様です。

4. プレーンな JavaScript:

window.onresize = function(event) {
    var w = 0;
    if (window.innerWidth != null) {
        w = window.innerWidth;
    }
    else if (document.body != null) {
        w = document.body.clientWidth;
    }
    document.getElementById("image").style.width = (w >= 600) ? 300 : 100;
};

これは例 2 と同じです。


その上、jQueryはJavaScript ですが、多くの人は代替手段のようなものだと考えています... jQuery は、多くの状況で JavaScript 開発をより快適にする方法にすぎません (上記の例で気づいたかもしれません)。;)

于 2012-08-11T21:06:51.043 に答える