使用CSS缩放背景图像

时间:2011-07-27 14:37:43

标签: html css image positioning background-image

如何使用CSS缩放背景图像?图像附有CSS,我想将其缩放以适合某个宽度

3 个答案:

答案 0 :(得分:9)

您可以尝试以下代码:

.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>

有效。我测试了它。

答案 1 :(得分:6)

使用background-size属性(具有limited support)。

答案 2 :(得分:0)

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