使背景图像适合 div

您可以使用 background-size 属性（现在是 supported by most browsers）实现此目的。

要缩放背景图像以适合 div 内部：

background-size: contain;

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

background-size: cover;

JSFiddle example

还存在 filter for IE 5.5+ support 和 vendor prefixes for some older browsers。

---

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

background-size: 100% 100%;

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

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

---

您可以使用此属性：

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-position-x: center;
background-position-y: center;

---

你也用这个：

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

我不知道你的 div 值，但我们假设你有这些。

height: auto;
max-width: 600px;

同样，这些只是随机数。为 div 制作具有固定宽度的背景图像（如果您愿意的话）可能非常困难，因此最好使用 max-width。实际上，用背景图像填充 div 并不复杂，只需确保以正确的方式设置父元素的样式，这样图像就有了可以进入的位置。

克里斯

---

尝试以下任何一项，

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

---

选择：

background-size: auto 100%;

---