Question

我正在尝试使用Bootstrap 3创建一个登陆页面。我想要一个全宽度列中的顶部图像，其下面有三个图像，没有边距或边框，因此图像无缝连接。

我可以靠近但是当我缩小视口时，顶部图像和下面的图像之间会打开一个空间。

以下是URL：

这是我的代码：

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：

.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;
}

我尝试使用100％的最小宽度和最大宽度，但它们对我不起作用。

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

Answer 1

您可以将块元素与背景图像一起使用，其中高度通过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;
}

Codepen中的

Example

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

Codepen中的

Example

Answer 2

让我们试试这些：

出现＆＃34;行＆＃34;一个人。
将col-md-*添加到每列
将landing-col高度降低至300px

<强> 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

.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;
}

这里演示=＆gt; http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/

Answer 3

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

Answer 4

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

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

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

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

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

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

4 个答案: