0

をDIV含むページに がありますIMG。画像をクリックすると、ライトボックスで開かれますが、DIV 内では、DIV を完全に埋める必要がありますが、アスペクト比は維持されます。

これは私がこれまでに達成したことです。問題は、画像が縦向きモードの場合に縦横比が保持されないことです。

http://jsfiddle.net/btvET/1/

したがって、必要なのは、ラッピング DIV を完全に塗りつぶしながら (そしてもちろん、画像のオーバーフロー部分を切り取って)、画像を垂直方向および水平方向の中央に配置する CSS メソッドです。

これは可能ですか、CSS のみですか、それとも JS が必要ですか? ブラウザの互換性は、IE8 以上、および最新のすべてのブラウザです。

JS/JQueryで次のように解決しました：

function resizeImages(){
    $("#container img").each(function() {
        var thisHeight = $(this).height();
        var thisWidth = $(this).width();
        var containerWidth = $(this).parent().width();
        var containerHeight = $(this).parent().height();
        var diff = 0;
        if(thisHeight > thisWidth){
            //portrait
            $(this).css("width","100%");
            thisHeight = $(this).height();
            diff = thisHeight - containerHeight;
            $(this).css("margin-top",-(diff/2));
        }
        else if(thisWidth > thisHeight){
            //landscape
            $(this).css("height","100%");
            var thisWidth = $(this).width();
            if(thisWidth < containerWidth){
                $(this).css("width", containerWidth);
                thisWidth = containerWidth;
            }
            diff = thisWidth - containerWidth;
            $(this).css("margin-left",-(diff/2));
        }
        $(this).css("opacity",1);
    });
}

最後に set-opacity を 1 に設定したのは、サイズ変更が終了したときにのみ画像を表示したいためです。そのため、CSS で画像を opacity:0 に設定し、サイズ変更後に表示します。

これは、すべてのコンテナ幅と画像モードで機能します。

4

2 に答える 2

3

これには Javascript の実装が必要です。jQueryを使用すると、高さが幅よりも大きいかどうか、またはその逆かどうかを確認できます。

あなたはこれを行うことができます：

$(".container img").each(function(){
var thisWidth = $(this).width();
var thisHeight = $(this).height();

if(thisWidth > thisHeight) {
    $(this).css("width", "auto");
    $(this).css("height", "100%");
} else if(thisHeight > thisWidth) {
     $(this).css("width", "100%");
     $(this).css("height", "auto");
}

});

お役に立てれば。

于 2013-05-11T02:19:26.533 に答える