0

我在 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");

谢谢！

4

2 回答 2

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 的情况下都有效。

于 2016-03-19T23:47:41.090 回答
0

尝试：

background-size:cover;

或者

background-size:contain;
于 2016-03-19T22:51:06.060 回答