響應：調整背景圖像的大小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

嘗試簡單的背景調整大小.js文件http://johnpatrickgiven.com/jquery/background-resize/

Answer 2

你可以嘗試使用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 3

你可以嘗試另一種方法是設置CSS

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

，並讓瀏覽器弄清楚這導致它保持縱橫比的高度。