☰

オーバーフローを非表示にしてdivの中央に画像を配置する 質問する

tag-icon • tag-icon html css center
オーバーフローを非表示にしてdivの中央に画像を配置する 質問する

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/

おすすめ記事