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

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%，所以不确定为什么它没有填满容器。

原文由 pocockn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

检查这是否解决了问题：

 <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 如果您使用引导程序 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>

此处 更新示例。

原文由 sQer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 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 applies max-width: 100%; height: auto;”但是 img -fluid 不能解决问题，也不能在 img 标签上手动添加带有或不带有引导类的样式属性。）

原文由 Poikilos 发布，翻译遵循 CC BY-SA 3.0 许可协议