jquery - スライドショーで画像を中央に配置する方法は?

Question

Nivo Slider プラグインを使用しています。画像があります (幅 = 2000px)。画像をスライドの中央に配置したい。

私のデスクトップの幅は 1280 です。側面を開くと、画像の最初と最後から 360 ピクセルをトリミングし、中央から 1280 ピクセルを表示する必要があります。

ブラウザのサイズを変更すると、中央が表示されるだけです。

これを実装することは可能ですか。スライドをレスポンシブにしたくありません。

Answer 1

Nivo スライダーについてはよくわかりませんが、画像を中央に配置する最良の方法は次のとおりです。

ここにhtmlのサンプルがあります

<div class="wrapper">
    <div class="slider">
        <img some image here/>
    </div>
</div>

CSS は次のように設定されます。

.wrapper {
    width:100%;
    height:400px;
}
.slider {
    width:100%;
    height:100%;
    position:relative;
}
img {
    width:2000px;
    position:absolute;
    left:50%;
    margin-left:-1000px;
}

これにより、画像が画面の中央に配置されます。img CSS は、画像の左側を画面の 50% (または中央) に配置します。次に、画像の中心点を画面の中心点に配置するために、左マージンに画像の幅の半分の負の数を指定する必要があります。