使用CSS縮放背景圖像

Question

使用CSS如何縮放背景圖像？圖像附有CSS，並且我想將其縮放以適合一定的寬度

Answer 1

你可以試試下面的代碼：

.aboutpic { 
width: 150px; /* replace 150px with something you need */ 
float: left; 
background-image: url(../images/aboutpic.jpg); 
background-repeat: no-repeat; 
background-position: center; 
background-size: 100%; 
height: 139px; /* replace 139 px with something you need */ 
} 

然後在HTML只是把：

<div class="aboutpic"></div> 

它的工作原理。我測試了它。

Answer 2

使用background-size屬性（其中有limited support）。

Answer 3

Javascript是一個很好的開始，「jquery.backstretch.js」是一個非常好的jquery lib來縮放背景img。

或者，如果你的目標客戶正在使用最新的瀏覽器，這意味着它可以支持CSS3， 使用這樣的：

body{ 
background:url(background.jpg); 
background-repeat:no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

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