使用CSS缩放背景图片

Question

如何使用CSS对背景图像进行缩放？该图像是使用CSS附加的，我想将其缩放以适应特定的宽度。

- Mild Fuzz

---

https://dev59.com/a3RC5IYBdhLWcg3wOOL1 - Jawad

https://dev59.com/IXM_5IYBdhLWcg3w9oWG - Jawad

http://css-tricks.com/766-how-to-resizeable-background-image/ - Jawad

明白了。我确实尝试过搜索，显然不够仔细 ;) - Mild Fuzz

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>

它可以正常工作。我进行了测试。

- Sajib Mahmood

Answer 2

使用 background-size 属性（该属性的支持有限，请参考）。

- Quentin

Answer 3

Javascript是一个很好的入门方式，"jquery.backstretch.js"是一个非常好的jQuery库，可以缩放背景图片。

或者，如果你的目标客户正在使用现代浏览器，也就是支持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

- MrB