1

フルスクリーンの親 div で html5-fullscreen モードを使用しています。このモードでは、画像を垂直方向に中央に配置したいのですが、画像が親 div よりも小さい場合 (つまり、画面サイズ) に限られます。max-heightまた、画像が画面よりも大きい場合にズームインしないように、画像を親の 100%に制限したいと考えています。

2 つの div (onedisplay:tableと other display:table-cell) を使用して画像を中央に配置できますが、同時に画像max-heightを親 div を超えないように設定することはできません。を使用して後者を実行できますが、position:absolute; max-height:100%;小さな画像ではセンタリングが機能しません。

マークアップの例:

<div id="fullscreen-container">
    <div id="fullscreen-img-wrapper">
        <img id="fullscreen-img" src="/images/test-6000x4000.png" />
    </div>
</div>

それをどのように達成できるかについてのアイデアは大歓迎です!

4

1 に答える 1

0 
<style>
#fullscreen-img-wrapper { display: table-cell;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    width: 100%; }
#fullscreen-img { width:100%; }
</style>

<div id="fullscreen-container">
    <div id="fullscreen-img-wrapper">
        <img id="fullscreen-img" src="/images/test-6000x4000.png" />
    </div>
</div>
于 2012-06-04T13:47:50.533 に答える