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

检查这是否解决了问题：

<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容器填充。

完整示例here。

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适用max-width：100％; height：auto;＆＃34;但是img-fluid无法解决问题，也没有在img标记上手动添加或不使用bootstrap类的样式属性。）

Answer 3

这对我有用。 注意：在一行中添加图像会引入一些空间，因此我有意仅使用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 4

container课程有15px左右＆amp;右边填充，所以如果你想删除这个填充，请使用以下内容，因为row类有-15px左右＆amp;右边缘。

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

Codepen：http://codepen.io/m-dehghani/pen/jqeKgv

Answer 5

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

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

P.S。我正在使用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 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>

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

6 个答案: