Bootstrap 4中容器内的全宽图像

Question

我正在使用Bootstrap 4,我有一个模板布局

<div class="navbar">
  ...
</div>
<div class="container">
  {{content}}
</div>

几乎在所有情况下都适用.但是,有时我希望内容中的图像占据整个宽度,但这是不可能的,因为.container使用left-padding和right-padding.

我可以通过.container在每个视图中的正确位置而不是在我的模板布局文件中添加类来解决这个问题,但这会变得非常烦人.特别是如果我有一个CMS,不同的作者可以写文章,如果他们想要在他们的文章中间有一个全宽的图像,他们必须写原始的HTML类似于

<div class="container">
  some text
</div>
<div class="full-width-image">
  <img src="" alt="">
</div>
<div class="container">
  more text
</div>
..

我怎么能解决这个问题？

Answer 1

你可以使用vw负边距的单位.它响应友好.

.full-width-image {
   width: 100vw;
   position: relative;
   left: 50%;  
   margin-left: -50vw;
}

.full-width-image img {
  width: 100%;
}

看我的小提琴:https://jsfiddle.net/ondrejruzicka/07y0o746/

Answer 2

作为不需要任何CSS的简单解决方案，您可以使用px-0间距实用程序将图像设置为全宽。

<!-- FULL-WIDTH IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12 px-0">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

<!-- 12 COLUMN IMAGE --> 
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <img class="img-fluid" src="your-image">
    </div>
  </div>  
</div>

看到这个代码笔：

请参阅CodePen上的Ferdinand Huber（@fdhu）的Pen 全幅图像。

有关间隔实用程序的更多信息：https : //getbootstrap.com/docs/4.1/utilities/spacing/

Answer 3

在bootstrap 4中，您可以应用以下img-fluid类：

<img class="img-fluid w-100" src="path.jpg" />

在这里使用w-100类来确保较小的图像适合其容器。

对于那些谁使用自举3：只是适用img-responsive的替代img-fluid。

Answer 4

如果您知道padding您div.container可以在图像类别上设置margin相同数量的负值。

HTML：

<div class="container">
    <img class="full-width-image" src="whatever.jpg" />
</div>

CSS：

.container {
    padding: 10px;
}

.full-width-image {
    margin: -10px;
}

或者，也许更正确的是，您可以完全删除paddingfrom div.container，只将其添加到其中需要它的元素中。