使背景图像适合div

您可以使用以下属性：

background-size: contain;
background-repeat: no-repeat;

然后您的代码如下所示：

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

您可以使用background-size属性来实现此目的，大多数浏览器现在都支持该属性。

缩放背景图像以适合div：

background-size: contain;

要缩放背景图像以覆盖整个div：

background-size: cover;

JSFiddle示例

还存在一个针对IE 5.5+支持的过滤器，以及一些旧版浏览器的供应商前缀。

如果您需要的图像具有与div相同的尺寸，我认为这是最优雅的解决方案：

background-size: 100% 100%;

如果不是，则@grc的答案是最合适的答案。

资料来源：http： //www.w3schools.com/cssref/css3_pr_background-size.asp