1. ホーム
  2. html

[解決済み] 背景画像をdivにフィットさせる

2022-03-22 07:41:25

質問

以下の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">

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

解決方法は?

で実現できます。 background-size プロパティは、現在では ほとんどのブラウザでサポートされている .

背景画像をdivの中に収まるように拡大縮小すること。

background-size: contain;

背景画像をdiv全体を覆うように拡大縮小する。

background-size: cover;

JSFiddleの例

また IE 5.5+ 対応のフィルタ と同様に 一部の旧ブラウザのベンダープレフィックス .