☰

背景画像をdivに合わせる 質問する

tag-icon • tag-icon html css background-image
背景画像をdivに合わせる 質問する

次の div に背景画像がありますが、画像が切り取られてしまいます。

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

背景画像を切り取らずに表示する方法はありますか?

ベストアンサー1

これを実現するにはbackground-size財産は現在ほとんどのブラウザでサポートされています。

背景画像を div 内に収まるように拡大縮小するには:

background-size: contain;

背景画像を拡大縮小して div 全体をカバーするには:

background-size: cover;

JSFiddle の例または実行可能なスニペット:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}
<div id="imagecontainer"></div>

また、IE 5.5+ のサポート用フィルター、 同様に一部の古いブラウザのベンダープレフィックス。

おすすめ記事