拉伸图像以适合整个容器宽度的引导程序

Question

我有一个 1300 像素宽的图像，使用引导程序我希望这个图像填充我设置为 1300 像素的容器的整个宽度。 我创建了一行，给它一个完整的 12 列，然后在图像中添加一类图像响应。 有了这个设置，我得到了下面的输出。

我希望我的图像一直延伸到我的图像在我的内容中的位置，这是我的代码。

  <div class="row">
    <div class="container">
      <div class="col-md-12">
        <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/>
      </div>
    </div>
  </div>

图像设置为宽度 100%，所以不确定为什么它没有填充容器。

Answer 1

在 bootstrap 4.1 中，对于小于要拉伸的页面的图像，需要 w-100 类和 img-fluid：

<div class="container">
  <div class="row">
    <img class='img-fluid w-100' src="#" alt="" />
  </div>
</div>

请参阅已关闭的问题： https : //github.com/twbs/bootstrap/issues/20830

（截至 2018-04-20，文档是错误的： https : //getbootstrap.com/docs/4.1/content/images/说 img-fluid 应用 max-width: 100%; height: auto;" 但 img -fluid 不能解决问题，也不能在 img 标签上手动添加带有或不带有引导程序类的样式属性。）

Answer 2

检查这是否解决了问题：

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

CSS 类no-padding将覆盖默认引导容器填充。

完整示例在这里。

---

@Update如果你使用 bootstrap 4，它可以做得更简单

<div class="container-fluid px-0">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
   </div>
</div>

在这里更新了示例。

Answer 3

首先，如果图像的大小小于容器，那么只有“img-fluid”类不能解决您的问题。 您必须将图像的宽度设置为 100%，为此您可以使用 Bootstrap 类“w-100”。 请记住，默认情况下，“container-fluid”和“col-12”类将左右填充设置为 15px，“row”类将左右边距设置为“-15px”。 确保将它们设置为 0。

注意： “px-0”是一个引导类，它将左右填充设置为 0 和
“mx-0”是一个引导类，它将左右边距设置为 0

PS 我使用的是 Bootstrap 4.0 版本。

 <div class="container-fluid px-0">
        <div class="row mx-0">
            <div class="col-12 px-0">
            <img src="images/top.jpg" class="img-fluid w-100">
            </div>
        </div>
    </div>

Answer 4

这对我有用。 注意：在一行中添加图像会引入一些空间，所以我特意只使用了一个 div 来封装图像。

<div class="container-fluid w-100 h-auto m-0 p-0">  

    <img src="someimg.jpg" class="img-fluid w-100 h-auto p-0 m-0" alt="Patience">           

</div>

Answer 5

container类有 15px 左右边距，所以如果你想删除这个边距，请使用以下内容，因为row类有 -15px 左右边距。

<div class="container">
  <div class="row">
     <img class='img-responsive' src="#" alt="" />
  </div>
</div>

代码笔： http ://codepen.io/m-dehghani/pen/jqeKgv

Answer 6

这将与许多其他答案相同，但会使侧面与窗口齐平，因此没有滚动条。

<div class="container-fluid">
  <div class="row">
    <div class="col" style="padding: 0;">
       <img src="example.jpg" class="img-responsive" alt="Example">  
    </div>
  </div>
</div>