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

markhorrocks 发表于 Dev

Markhorrocks

我正在尝试使用Bootstrap 3创建登录页面。我想要全宽列中的顶部图像，其下方有三幅图像，各列之间没有边距或边框，因此图像可以无缝连接。

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

这是网址：

这是我的代码：

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

我尝试将min-width和max-width与100％一起使用，但它们对我不起作用。

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

拉哈特

您可以将块元素与背景图像一起使用，并通过百分比值通过填充底部设置高度

.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

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

实施例中Codepen

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。