使用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屬性（ 支持有限 ）。

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