背景画像をdivに合わせる

334

次の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">

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

html css background-image

— ラジーブ
ソース

画像はdivよりも大きいですか？

— grc

1

はい、画像はdivよりも大きい

— Rajeev

1

background-image：url（/media/img_1_bg.jpg）; 背景サイズ：含む; background-repeat：no-repeat;

— Waruna Manjula、

672

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

背景画像をdiv内に収まるようにスケーリングするには：

background-size: contain;

div全体をカバーするように背景画像を拡大縮小するには：

background-size: cover;

JSFiddleの例

また、そこに存在するIE 5.5以降をサポートするためのフィルターだけでなく、一部の古いブラウザのベンダープレフィックスを。

— grc
ソース

119

必要なのがdivと同じサイズの画像である場合、これが最もエレガントなソリューションだと思います。

background-size: 100% 100%;

そうでない場合、@ grcによる回答が最も適切な回答です。

出典：http : //www.w3schools.com/cssref/css3_pr_background-size.asp

— サーテージ
ソース

最後に、div全体を背景に合わせるソリューションを見つけました。ありがとうございました！

— カミルリコウスキー

5

しかし、これは画像を引き伸ばします...それを引き伸ばさずに背景画像に合わせる方法はありますか？

— Junaid

1

ただし、アスペクト比は失われました。

— 学習者

@Learner画像をトリミングせずに画像の寸法を変更すると、アスペクト比が99％失われます。それは常識です。

— Vaibhav Vishal

11

次の属性を使用できます。

background-size: contain;
background-repeat: no-repeat;

コードは次のようになります。

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

— hojjat.mi
ソース

8

あなたもこれを使います：

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

私はあなたのdiv値を知りませんが、それらを持っていると仮定しましょう。

height: auto;
max-width: 600px;

繰り返しますが、これらは単なる乱数です。divの幅を固定して（必要に応じて）背景画像を作成することは非常に難しいため、max-widthを使用することをお勧めします。実際にdivをbackground-imageで埋めることは複雑ではありません。親要素を正しい方法でスタイル設定し、画像が入る場所があることを確認してください。

クリス

— キリスト教徒
ソース

このソリューションについて詳しく説明している投票数の多い回答へのリンク：stackoverflow.com/questions/600743/…との計算方法を示しますpadding-top。

— ジョン・リー・