1

これが意味をなさない場合、または私が無能に聞こえる場合は、事前に謝罪します...私はしばらくの間ウェブページを作成していますが、JavaScriptを知りません。

友人のためにウェブページを作成しようとしていますが、ユーザーの画面解像度に基づいてページ内の画像のサイズを変更するコードを記述できるかどうかを尋ねられました。私はこの質問についていくつかの調査をしました、そしてそれはこれ、これ、そしてこれに似ています。残念ながら、説明されている方法のいずれも機能しなかったため、これらの記事は私の質問に完全には答えませんでした。

現在、左側のサイドバーのテーブルに10枚の画像を含む3列のWebページがあり、サイズにパーセンテージを使用すると、モニター間でサイズが変更されません。そのため、画面の解像度を検出した後にサイズを変更するJavaScript関数を作成しようとしています。

すべてを入力すると、コードが投稿から削除されるため、各画像はWebサイトにリンクし、カーソルを合わせると色が変わるために個別の画像を使用します。サイズを正しく変更するには、両方の画像に対応する必要がありますか？JavaScript関数を使用してそれらを切り替えます。

とにかく、私はこの記事で両方の方法を試しましたが、どちらもうまくいきませんでした。それが役に立ったら、私はGoogle Chromeを使用していますが、このページを可能な限りクロスブラウザーにしようとしています。

これまでのJavaScript関数のコードは次のとおりです。

function resizeImages() {
    var w = window.width;
    var h = window.height;
    var yuk = document.getElementById('yuk').style;
    var wb = document.getElementById('wb').style;
    var tf = document.getElementById('tf').style;
    var lh = document.getElementById('lh').style;
    var ko = document.getElementById('ko').style;
    var gz = document.getElementById('gz').style;
    var fb = document.getElementById('fb').style;
    var eg = document.getElementById('eg').style;
    var dl = document.getElementById('dl').style;
    var da = document.getElementById('da').style;

    if (w = "800" && h = "600") {
    }
    else if (w = "1024" && h = "768") {
    }
    else if (w = "1152" && h = "864") {
    }
    else if (w = "1280" && h = "720") {
    }
    else if (w = "1280" && h = "768") {
    }
    else if (w = "1280" && h = "800") {
    }
    else if (w = "1280" && h = "960") {
    }
    else if (w = "1280" && h = "1024") {
    }
}

ええ、私はまだそれをやっているかどうかわからないので、私はそれに多くを持っていません。これは、ウィンドウの「幅」と「高さ」のプロパティを検出する方法ですか？「yuk」、「wb」などは、サイズを変更しようとしている画像です。

要約すると：

JavaScriptを使用して画面解像度に基づいて画像のサイズを変更したいのですが、私の研究の試みは...無駄でした。

時間がかかってすみませんが、よろしくお願いします！

4

1 に答える 1

1

これでうまくいくはずです。

init();

function init()
{
    var images = document.getElementById("images");
    for(var i=0;i<images.childNodes.length;i++)
    {
        //scare off possible text nodes
        if(images.childNodes[i].tagName == "IMG")
        {
            images.childNodes[i].width = window.innerWidth * .25;
            images.childNodes[i].height = window.innerHeight * .25;
        }
    } 
}

imagesすべてのテキスト ノードを除外しながら、id を持つ div からすべての子を取得してループしています。次に、ブラウザの幅/高さに を掛けたものに基づいて幅と高さを設定するだけです.25。

http://jsfiddle.net/CQsPk/1/

于 2011-01-09T03:43:41.523 に答える