html - レスポンシブ: div の背景画像のサイズを変更します

Question

以下のコードを使用して、画像を背景として表示していdivます。サイズを変更するにはどうすればよいですか？

#header {
    height: 255px;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    background-position: 50% 50%;
    background-image: url('../simg/header.png');
}

Answer 1

background-sizeプロパティを使用して、背景のサイズを制御してみてください。

例えば：

#header {
height: 255px;
-webkit-background-size:50%;
-moz-background-size:50%;
background-size:50%;
background-position: 50% 50%;
background-image: url('../simg/header.png');
}

これにより、背景画像がいずれかの次元で正確に半分に縮小されます。

Answer 2

Easy Background Resize .js http://johnpatrickgiven.com/jquery/background-resize/を試してください

Answer 3

あなたが試すことができる別のアプローチは、CSSを設定することです

background-size:contain;  
width:50%; 
max-height:255px; 

ブラウザに高さを計算させて、アスペクト比を維持します。