Question

如何在div的背景中按比例缩放背景图像？ I'm not asking background resizing of full <body>background.

在这个jsfiddle示例http://jsfiddle.net/jitendravyas/aQCen/1/中，当您重新调整浏览器或js小提示结果窗口时，您将看到文本按比例重新调整大小。但在这张图片中没有调整大小。我也想像文字一样缩放图像。

如果在标记中将其用作<img>，我已经知道调整图像大小的方法。但在这个问题中，我问的是how to resize the image which is in css background

Answer 1

您可以使用css3属性“ background-size ”，但只有IE9 +，Firefox 4和Webkit浏览器支持此功能。 “封面”和“包含”值可能值得一看 - 封面将背景图像缩放到容器的最大宽度或高度而不裁剪图像，而包含缩放以完全填充容器，而某些区域可能不可见。

在此处查看更多内容：http://www.css3.info/preview/background-size/

Answer 2

试试这个

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:contain; 
background-repeat:no-repeat;
background-position:center;"></div>

<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:cover; 
background-repeat:no-repeat;
background-position:center;"></div>

在gecko / webkit / opera工作，可能还有新人msie

完整文档：

https://developer.mozilla.org/en/CSS/background-size

如何在div的css背景中按比例缩放背景图像？

2 个答案: