web-dev-qa-db-ja.com

背景画像を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">

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

htmlcssbackground-image
276
Rajeev

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

背景画像をdivの内側に合わせて拡大縮小するには

background-size: contain;

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

background-size: cover;

JSFiddleの例

IE 5.5+サポート用のフィルタ 、および 一部の古いブラウザ用のベンダプレフィックス も存在します。

565
grc

あなたが必要とするものがdivの同じ寸法を持つためにイメージであるならば、私はこれが最もエレガントな解決策であると思います：

background-size: 100% 100%;

そうでなければ、@ grcによる答えが最も適切なものです。

ソース： http://www.w3schools.com/cssref/css3_pr_background-size.asp

91
Sertage

あなたもこれを使用します。

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

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

height: auto;
max-width: 600px;

繰り返しますが、これらは単なる乱数です。 divの幅を固定してbackground-imageを作成するのはかなり難しいかもしれませんので、max-widthを使用したほうがよいでしょう。実際、divをbackground-imageで埋めるのは煩雑ではありません。親要素を正しい方法でスタイルしていることを確認してください。そうすれば、その画像には入る場所ができます。

クリス

8
Christian

この属性を使うことができます。

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">
1
hojjat.mi