使背景图片适合 div

Question

我在以下 div 中有一个背景图像，但图像被截断了：

  <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法在不切断背景图像的情况下显示背景图像？

原文由 Rajeev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 background-size: contain;

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

 background-size: cover;

JSFiddle 示例 或可运行片段：

 #imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

 <div id="imagecontainer"></div>

还有一个 用于 IE 5.5+ 支持的过滤器，以及 一些旧浏览器的供应商前缀。

原文由 grc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 background-size: 100% 100%;

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

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

原文由 Sertage 发布，翻译遵循 CC BY-SA 4.0 许可协议