jquery - Div 内の CSS センター画像

Question

ブラウザーの画面サイズに関係なく、すべて幅 1600 ピクセルの大きな高解像度画像を含むサイトを構築する必要があります。

画像は 1024 ピクセルまで中央に配置しても見栄えがよくなるように設計されていますが、常に左上ではなく中央から固定して表示する必要があります。

誰かが解決策を持っていますか?理想的には、画像のインライン バージョンとバックグラウンド バージョンの両方に適しています!?

私はie8 plusをターゲットにしているので、CSS3ソリューションは問題ありません。

Answer 1

ふたつのやり方：

背景画像の使用

これは簡単です。CSSコードは次のとおりです。

div.image-wrapper {
    background: url('imgs/example.png') no-repeat center;
}

IMGタグの使用

HTMLは次のとおりです。

<div id="img-area">
    <img src="imgs/example.png"/>
</div>

CSS：

#img-area img {
    display:block; //this will let us use margin auto
    margin:auto;
    top: (n)px;  //you can obtain 'n' by using JavaScript
}

または、 http：//css-tricks.com/centering-in-the-unknown/で概説されている方法を使用することもでき ます。これにより、JavaScriptを使用する必要がなくなります。

Answer 2

画像は同じサイズのままですが、中央部分だけを見ている場合でも見栄えがよくなるように設計されているということですか? もしそうなら...

<img href="..." class="centered" />

.centered {
    position:fixed; top:50%; left:50%;
    width:1600px; height:800px;
    margin: -400px 0px 0px -800px;
    }

これにより、1600x800px の画像が中央に配置されます。上余白を変更して、画像の高さの半分を引いた値にします。

説明のために追加しただけで、寸法を宣言する必要はありません。

Answer 3

私にとってうまくいったのは、ボディの直後に id background を持つ div 内に画像を配置し、次の CSS を使用することです。

#background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}