全尺寸背景图像col - * - *在Bootstrap

我已经发现了一些关于这个主题的问题，但他们都不能真正帮助我解决我的问题。全尺寸背景图像col - * - *在Bootstrap

我想建立一个简单的引导格栅看起来像这样：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-8"> Some Text </div> 
    <div class="col-sm-4"> 
     <img src="..." alt="Full Size Background Image" /> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <img src="..." alt="Full Size Background Image" /> 
    </div> 
    <div class="col-sm-8"> Some Text </div> 
    </div> 
</div>

山坳-SM-4的DIV应包含相同的高度的文本，没有填充一个全尺寸的背景图像。

这里是我的意思的照片。我希望背景图像覆盖红色区域：

See Example

任何想法如何做到这一点？

非常感谢您的帮助！

来源

2017-07-04 maxiw46

首先选项，你可以在你img标签设置min-width:100%：

img { 
    min-width: 100%; 
}

或第二选项，你可以将图像设置为背景并将其设置为您想要的div：

<div class="col-sm-4 full-img">

而CSS：

.full-img { 
    background-image: url("...."); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

来源

2017-07-04 10:05:22 samAlvin

感谢您的快速响应。不幸的是，图像并没有涵盖整个栏目，我仍然在各方面都有填充。我给我的主要帖子附上我的意思的照片。 – maxiw46

使用CSS来设置背景图片在列

<div class="row"> 
    <div class="col-sm-4" style="background-image:url('.....')"> 
     content...... 
    </div>

来源

2017-07-04 10:02:58 hairmot

谢谢你的快速反应。不幸的是，图像并没有涵盖整个栏目，我仍然在各方面都有填充。我给我的主要帖子附上我的意思的照片。 – maxiw46

尝试在图像上设置负边距...类似于：style =“margin-left：-15px;” – hairmot

全尺寸背景图像col - * - *在Bootstrap

回答

相关问题