divs背景画像をそのサイズに合わせて設定しますか？

Question

背景画像付きの<div>があります。

<div>サイズは時間とともに変化する可能性があります。

<div>サイズに合うようにDivs背景画像を設定することは可能ですか？

400x400であるdivと1000x1000であるImageがあるとします。画像を400x400に縮小して、<div>サイズに合わせることができますか？

Answer 1

CSS3を使用したい場合は、background-sizeを使用して簡単に実行できます。

background-size: 100%;

すべての主要なブラウザ（IE9 +を含む）でサポートされています。 IE8以前で動作するようにしたい場合は、 この質問 への回答をご覧ください。

Answer 2

つかいます background-size その目的のために：

background-size: 100% 100%;

詳細：

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

Answer 3

background-size プロパティを使用して、これを実現します。 cover、contain、および100%から選択する必要があります-正確に取得する内容に応じて。

Answer 4

これは、ほとんどのブラウザでサポートされるようになったbackground-sizeプロパティで実現できます。

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

background-size: contain;

Div全体を覆うように背景画像を拡大縮小するには：

background-size: cover;

Answer 5

レスポンシブとしても機能するため、これを使用します。 ：

background-size: cover;

Answer 6

これにはCSS3 background-sizeプロパティを使用できます。

.header .logo {
background-size: 100%;
}

Answer 7

これにCSSを設定します

img {
    max-width:100%,
    max-height100%
}

Answer 8

background-sizeを使用できないIE8以下（IE5.5程度の低さ）のソリューションを追加したかった

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}