5

ブラウザ ウィンドウのサイズに等しい div (div1) を作成しました。次に、親 div (div1) 内に別の div (div2) を作成しました。次に、2 番目の div (div2) 内に画像を配置しました。私のブラウザ ウィンドウのサイズは 1360X638 で、画像のサイズは 1600*1200 です。

親の div (div1) のサイズに合わせて画像を合わせたい。したがって、画像 (ウィンドウ サイズよりも大きい) は、ウィンドウ サイズに等しい 2 番目の div (div2) に収まる必要があり、この画像は div のサイズに正確に収まります (したがって、ディスプレイ内の画像のスクロールまたはトリミング)。

しばらく探しました。私が見つけた解決策は、最大の高さと幅を 100% に設定することです。これは私がしました。

私はこの部分を書きました：

<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
    <div style="max-height: 100%; max-width: 100%;">
        <img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
    </div>
</div>

出力は次のようになります。

ここに画像の説明を入力してください

右側にスクロールがあることがわかります。私はそこにそれをしたくありません。

4

1 に答える 1

9

jQuery ソリューション - 概念実証

次のHTMLがあるとします。

<div class="container">
    <img src="http://placehold.it/1600x1200" />
</div>

次のCSSルールを適用して、ビュー ポートに合わせて画像のサイズを変更できます (ブラウザーの幅または高さの 100%)。

html, body {
    height: 100%;
    margin: 0;
}
.container {
    height: 100%;
    width: 100%;
    background-color: red;
    text-align: center; /* optional */
}
.container img {
    vertical-align: top;
}
.portrait img {
    width: 100%;
}

.landscape img {
    height: 100%;
}

次のjQueryメソッドを使用して、ビュー ポートの縦横比に応じて正しい CSS ルールを選択します。

function resizeImg() {
    var thisImg= $('.container');
    var refH = thisImg.height();
    var refW = thisImg.width();
    var refRatio = refW/refH;

    var imgH = thisImg.children("img").height();
    var imgW = thisImg.children("img").width();

    if ( (imgW/imgH) > refRatio ) { 
        thisImg.addClass("portrait");
        thisImg.removeClass("landscape");
    } else {
        thisImg.addClass("landscape");
        thisImg.removeClass("portrait");
    }
}

$(document).ready(resizeImg())

$(window).resize(function(){
    resizeImg();
});

デモ フィドル: http://jsfiddle.net/audetwebdesign/y2L3Q/

これは完全な答えではないかもしれませんが、出発点になるかもしれません。

参照
以前に関連する問題に取り組みましたが、これは興味深いかもしれません:
Make image fill div 完全にストレッチせずに

于 2013-08-07T17:27:28.823 に答える