400 ピクセルの画像とそれより小さい div があります (例のように幅が常に 300 ピクセルであるとは限りません)。画像を div の中央に配置し、オーバーフローがある場合は非表示にします。
注:position:absolute
画像を のままにしておく必要があります。私は CSS トランジションを使っていますが、 を使用するとposition:relative
画像が少し揺れてしまいます (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/)。
jsfiddlehttp://jsfiddle.net/wjw83/1/
ベストアンサー1
コンテナを相対的に作成し、高さも指定すれば完了です。
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
必要に応じて、負の余白と上部の位置を追加して、画像を垂直方向に中央に配置することもできます。http://jsfiddle.net/jaap/wjw83/5/