-2

div 内で垂直方向に画像を中央に配置しようとしています。ここでスタックオーバーフローに関する他の同様の質問をいくつか読んだので、このソリューションを使用することにしました。

<div id="wrapper">
    <div id="cell">
        <img />
    </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

これは、ビューポート サイズより小さい画像に最適です。画像の高さがビューポートよりも大きい場合に問題が発生します。その場合、ラッパー div は単に画像の高さになります。そして、それはページをオーバーフローします。どうすればそれを回避できますか。

このラッパー div はビューポート div の一部です。ビューポート div は高さが固定で、幅が 100% の絶対位置に配置されています 

#view-port{ height: 600px; width:100% }

編集：質問に関して混乱を引き起こしたと思います。私が何を意味するかを説明するために JSfiddle を作成しました

ここにリンクがあります：http://jsfiddle.net/sublime/fgTtj/

フィドルでわかるように、画像のサイズがありませんが、#outer div の高さが画像の高さよりも小さくなると、たとえば 200 で画像が切り取られます。代わりに、その画像を外側の div に合わせて縮小したい

4

3 に答える 3

0

のポイントは何display:tableですか? 空白のままにして (または を使用してdisplay:inline-block)、overflowプロパティを追加することができます。

#wrapper{
  overflow:hidden;
  }

スクロールして画像の残りの部分を表示できるようにする場合は、次のようにします。

 #wrapper{
  overflow:scroll;
   }
于 2013-04-16T23:53:49.140 に答える
0

画像がビューポートの高さを拡張しないようにするには、次のように設定しmax-heightます。

#cell img { max-height: 600px; }
于 2013-04-17T00:17:51.353 に答える
0

この回答は、OP のニーズに合わせて切り捨てられ、編集されています。

jQueryを使用して、ここに私が提案するものがあります。いくつかの div を取り除き、ラッパーと画像だけを使用できます。上記のコードの問題は、外側の div の高さを 300px に設定したことです。これは、それよりも小さくなることは決してないことを意味します。ウィンドウサイズも考慮した小さなスクリプトを作成しました

http://jsfiddle.net/fgTtj/40/

HTML を次のように設定しました。

<div class="wrapper">
    <img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>

CSS は次のようになります。

.wrapper {
    position:relative;
    width:100%;
    height:300px;
    background-color:blue;
    overflow:hidden;
}

.wrapper img{
    position:absolute;
    max-width:100%;
    max-height:100%;
}

新しい jQuery は次のようになります。

function center(){
    var imgW = $('img').width();
    var imgH = $('img').height();
    var half_imgW = imgW / 2;
    var half_imgH = imgH / 2;
    $('img').css({
        left: "50%",
        top: "50%",
        margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
    });
}

$(document).ready(function(){
    var wrapper_Height = $('.wrapper').height();
    center();
    $(window).resize(function(){
        console.log(wrapper_Height);
        var winH = $(this).height();
        var wrapH = $('.wrapper').height();
        if(winH <= wrapH){
            $('.wrapper').height(winH);    
        } else {
            if(wrapH <= wrapper_Height){
                $('.wrapper').height(winH); 
            }
        }
        center();
    });    
});

このウィンドウのサイズを任意の方向に変更できます。画像は中央に配置され、途切れることはありません。これは現時点では 1 つのウィンドウでしか機能しないため、スクリプトを調整してより多くのウィンドウに対応させる必要があります。

これの素晴らしい点は、display:table-cellIE6 や IE7 などの古いブラウザーでは機能しない、ほぼすべてのブラウザーで実行できることです。

于 2013-04-17T00:01:01.547 に答える