css - 如何使 CSS 中的背景图像具有响应性？引导程序

Question

我在 css 中有这个图像，我想向它添加 bootstrap class:img-responsive以便它变得响应。如果它在 HTML 中很容易，但如何在 CSS 中做到这一点？

#index-jumbotron {
    height: 490px;
    margin-left: 0;
    margin-right: 0;
    background-image: url("../images/Eiffel%20Sunset%203.JPG");

谢谢！

Answer 1

以下是如何在 CSS 中制作响应式背景图片：

body {
   margin: 0;
}

#index-jumbotron {
    background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
    background-size: cover;
    padding-bottom: 46.128%; /* <- This value should be equal to height / width */
}

<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>

（另见这个小提琴）

这在有和没有 Bootstrap 的情况下都有效。

Answer 2

尝试：

background-size:cover;

或者

background-size:contain;