CSS 如何在 Bootstrap 3 网格中覆盖背景图像？

How to cover background images in Bootstrap 3 grids?

提问by markhorrocks

I'm trying to make a landing page using Bootstrap 3. I want a top image in a full width column with three images below it in columns across and no margins or borders so the images joins seamlessly.

我正在尝试使用 Bootstrap 3 制作登录页面。我想要一个全宽列中的顶部图像，其下方的三幅图像在横列中并且没有边距或边框，因此图像可以无缝连接。

I can get close but when I narrow the view port a space opens up between the top image an the ones below it.

我可以靠近，但是当我缩小视口时，顶部图像与其下方的图像之间会出现一个空间。

Here is the URL:

这是网址：

Here is my code:

这是我的代码：

HTML:

HTML：

<div class="container-fluid">
  <div class="row">      

    <div class="landing-col col-xs-12"></div>

  </div>

  <div class="row">

    <div class="first-col col-sm-4"></div>                      
    <div class="second-col col-sm-4"></div>           
    <div class="third-col col-sm-4"></div>

  </div>

</div>

CSS:

CSS：

.landing-col {
   background: url('../images/99.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 500px; }

.first-col {
   background: url('../images/44.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
}

.second-col {
background: url('../images/33.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

.third-col {
background: url('../images/22.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

I have tried using min-width and max-width with 100% but they don't work for me.

我曾尝试使用 100% 的 min-width 和 max-width 但它们对我不起作用。

A possibility might be to use a media query to get the exact width of the current grid and set the image width inside it to that width. Is this possible?

一种可能性是使用媒体查询来获取当前网格的确切宽度并将其中的图像宽度设置为该宽度。这可能吗？

回答by Rakhat

You can use block element with background image where height is set via padding-bottom with percentage value

您可以使用带有背景图像的块元素，其中高度通过带有百分比值的 padding-bottom 设置

.img {
    margin-right: -15px; // Remove right gap
    margin-left: -15px;  // Remove left gap
    padding-bottom: 62.5%; // ratio is 16:10
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Examplein Codepen

实施例中Codepen

or with img elements (in this case your images should have the same dimensions)

或使用 img 元素（在这种情况下，您的图像应具有相同的尺寸）

Examplein Codepen

实施例中Codepen

回答by Wilf

Let's try these:

让我们试试这些：

1. Emerge "rows" into one.
2. Add col-md-*into each column
3. Decrease the landing-colheight to 300px

1. 将“行”合并为一个。
2. 添加col-md-*到每一列
3. 将landing-col高度降低到 300px

HTML

HTML

<div class="container-fluid">
    <div class="row">
        <div class="landing-col col-md-12 col-xs-12"></div>
        <div class="first-col col-md-4 col-sm-4"></div>
        <div class="second-col col-md-4 col-sm-4"></div>
        <div class="third-col col-md-4 col-sm-4"></div>
    </div>
</div>

CSS

CSS

.landing-col {
    background: url('http://sample.trainingdata.com.au/images/99.jpg') no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
    margin:0;
    padding:0px;
}

Demo here=> http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/.

演示在这里=> http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/。

回答by Chris

You could always add a transparent image placeholder inside the div to hold the container, and then set an auto height on the containing div 'col-xs-12'. This will still enable you to use a background image with the cover attribute which will fill the area on narrower columns.

您始终可以在 div 内添加一个透明图像占位符来容纳容器，然后在包含的 div 'col-xs-12' 上设置自动高度。这仍将使您能够使用具有覆盖属性的背景图像，该图像将填充较窄列上的区域。

回答by Kamil

Do you really need to use top image as a background of the div? Try this code instead of your <div class="landing-col col-xs-12"></div>:

你真的需要使用顶部图像作为 div 的背景吗？试试这个代码而不是你的<div class="landing-col col-xs-12"></div>：

<div class="landing-col col-xs-12">
    <img src="images/99.jpg">
</div>

After that all properties you will need is:

之后，您需要的所有属性是：

.landing-col { padding: 0px; } // resets .col-xs-12 padding-right and padding-left

.landing-col img { width:100%; }