twitter-bootstrap: 使一行 (div) 背景图像自动缩放并居中以填充 100%？

Question

我有一个 Bootstrap 页面，其中一些行有背景图片。有没有办法（最好是 css）缩放这样的背景图像，使其始终居中并填充 div 100%？

所以我并不是说整个页面的全屏背景图片（如 this），它只需要填充 div（通常是我 bootstrap 中的一行容器）。

我的意思是这样的：

因此，无论 div 的显示分辨率和实际屏幕大小如何，其背景图像都应相应缩放，以便 完全填满 div .图像不应不不按比例拉伸，这意味着图像的一部分通常会落在 div 之外，up/down 或 left/right （除非 div 恰好与图像具有完全相同的纵横比）。

图片也应该居中，即背景图片的中间应该在div.

中间

我已经用 background-size:100% auto 或 auto 100% 尝试了各种各样的事情，这似乎在一个方向上工作正常，但我似乎无法找到适用于所有情况的通用解决方案.

Answer 1

当然，您可以将相同的想法应用于任何元素：

yourdiv  {
     background: url(images/bg.jpg) no-repeat center center fixed;
     /* and one of these: */
     background-size:contain;
     background-size:cover;
}

twitter-bootstrap: 使一行 (div) 背景图像自动缩放并居中以填充 100%？

twitter-bootstrap: make a row (div) background image auto scale and center to fill 100%?

css

background-image

scale

centering

twitter-bootstrap