javascript - 画像を中央に配置して非表示にし、div サイズに合わせます

Question

1400px幅 div 内の幅の画像を中央に960px配置し、左の 220px と右の 220px を非表示にする必要があります。

<div style="width:960px;">
    <img src="src" style="width:1400px" />
</div>

Answer 1

試す：

div {overflow:hidden;}
img {margin-left: -220px;}

Answer 2

これは、次の CSS を使用すると非常に簡単です。

#wrapper {
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 400px;
}
#wrapper img {
    position: absolute;
    left: -220px;
    width: 1400px;
}

高さがわからない場合は、負の左マージンまたは position: relative を使用することをお勧めします。

#wrapper {
    overflow: hidden;
    width: 960px;
}
#wrapper img {
    position: relative;
    left: -220px;
    display: block;
}

画像のサイズが動的である場合は、次のようなことを試すことができます。

#wrapper {
    width: 960px;
    overflow: hidden;
}
#wrapper .inner {
    width: 10000px;
    position: relative;
    left: -4520px; /* 5000 minus half the wrapper width */

}
#wrapper .inner img {
    display: block;
    margin: 0 auto;
}

これには追加のラッパーが必要であることに注意してください.inner。