4

いくつかのサムネイルがあり、それらをクリックすると、大きな画像から幅/高さを 50% 拡大したい DIV を持つモーダル ボックスがあります。

次のスケーリング方法が有効であり、800x530 ピクセルの画像に対してクロスブラウザーであるかどうかを知りたいです。

#foo-img { width: 100%; height: 100%; }
#foo-div {
    width: 400px; height: 265px;
    padding: 10px; background: black;
}

<div id="foo-div">
    <img id="foo-img" src="img/003.jpg" />
</div>

#foo-img新しい画像をロードするたびに 50% 小さくなるため、幅/高さの属性を設定するだけではないようです!

これは機能するものですが、私には非常に多くのコードのようです:

var rnd = Math.floor(Math.random() * 101)

$("a.loadimg").click(function() {
    // resets the DIV
    imgLoadReset();
    var imgPath = "images/" + $(this).text() + "?" + rnd;
    imgLoad(imgPath);
    return false;
});

function imgLoad(imgPath) {
    $("#foo-img").hide()
        .one('load', function() {
            imgLoadComplete();
        })
        .attr("src", imgPath)
        .each(function() {
            if (this.complete) $(this).trigger('load');
        });
}

function imgLoadComplete() {
    // after the image is completely loaded, we can get the w/h of the image
    var imgW = $("#foo-img").width() / 2;
    var imgH = $("#foo-img").height() / 2;

    // set div to half image size           
    $("#foo-div").css({
        "width": imgW,
        "height": imgH
    });
    // this should scale the image inside the div
    $("#foo-img").css({
        "width": "100%",
        "height": "100%"
    });

    $("#foo-img").show();
}

function imgLoadReset() {
    // delete w/h attributes otherwise it doesn't work
    $("#foo-img").css({
        "width": "",
        "height": ""
    });
    // clear image with a blank
    $("#foo-img").attr("src", "about:blank");
}

HTML

<div id="foo-div">
    <img id="foo-img" src="about:blank" />
</div>
<hr>
<a class="loadimg" href="#">001.jpg</a> | 
<a class="loadimg" href="#">002.jpg</a> | 
<a class="loadimg" href="#">003.jpg</a> | 
<a class="loadimg" href="#">004.jpg</a>
4

1 に答える 1

1

使用する

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

あなたの画像のために; コンテナdivの目的の幅（ピクセル単位）を指定します。

于 2012-07-09T00:32:38.190 に答える