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

我正在尝试使用Bootstrap3创建登录页。我想要一个全宽列中的顶部图像，下面有三个跨列的图像，没有边距或边框，以便图像无缝连接

我可以靠近，但当我缩小视图端口时，顶部图像和下方图像之间会出现一个空间

以下是：

这是我的密码：

HTML:

我已经尝试使用最小宽度和最大宽度的100%，但他们不适合我

---

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

您真的需要使用顶部图像作为div的背景吗？请尝试此代码而不是您的

：

---

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

让我们尝试以下方法：

将“行”合并为一行

将

列md-*

添加到每列中

将着陆柱高度降低到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>

---

Demo here=>。

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

.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中

是，我希望在div中以任何视图端口大小完全显示（覆盖）图像。我意识到我可以使用较少的媒体查询来更改不同视图端口大小的图像，但这会失去覆盖效果。您能将bootply.com/new#放在一起显示问题吗？行和列有默认的填充-只需删除它。问题不在于填充。那已经过去了。我的问题是，我必须显示一个固定的图像宽度或高度，以获得图像显示。这会在较小的视口尺寸下导致高度问题。将图像放置在html中会阻止图像动态调整大小以适应列。我还没弄清楚，从未使用过bootply。您是否计划将内容放入网格中的列中？如果没有，我建议使用实际的

s并删除列中的填充。1。这是一个只有链接的答案2。它在sm列上中断-*断点仍然是，除了一个答案，你还期待什么？一个解释。有关仅链接答案的详细信息，请查看此链接。@CarrieKendall，感谢您上了宝贵的一课。url返回404我得到了相同的结果。无论我制作的透明图像大小，图像大小决定了列的大小。62.5%的微小间隙，而在24英寸全尺寸显示器上为39%。谢谢。

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

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

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

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