拉伸图像以适合完整的容器宽度引导

Question

我有一个1300px宽的图像,使用bootstrap我希望这个图像填充我的容器的整个宽度,设置为1300px.我创建一行,给它一个完整的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标记上手动添加带或不带bootstrap类的样式属性.)

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将覆盖默认的bootstrap容器填充.

完整的例子在这里.

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>