Html 拉伸图像以适合整个容器宽度引导

我有一个1300px宽的图像，使用引导，我希望这个图像填充我的容器的整个宽度，设置为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>

/资产/img/homeBanner.jpg“alt=“placeholder 960”class=“img responsive”/

---

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

容器

类具有15px左右边距，因此如果要删除此边距，请使用以下命令，因为

行

类具有-15px左右边距

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

---

代码笔：

检查这是否解决了问题：

<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类

无填充

将覆盖默认的引导容器填充

完整的例子

---

@更新 如果您使用Bootstrap4，它可以做得更简单

<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>

---

更新示例。

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

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

见非公开发行：

---

（截至2018-04-20，文档错误：说明img流体应用最大宽度：100%；高度：自动；“但img流体无法解决此问题，也无法在img标记上手动添加带有或不带有引导类的样式属性。）

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

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

另外，我使用的是Bootstrap4.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>

---

以下是对我有效的方法。注意：在一行中添加图像会引入一些空间，因此我特意只使用一个div来封装图像

---

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

<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>

 <代码>行<代码>类必须嵌套为<代码>容器类，将顺序更改为<代码>容器>行> COLL/COD>这使我的图像变得更小，只有当你同意它是优越的时，你可以考虑接受PoikOS的答案来为将来的访问者受益，这是正确的答案，如果你是的话。遵循引导简单的网格规则，而不是用覆盖对其进行黑客攻击。这是imho最具引导性的答案。但一个问题是它会导致滚动条。在引导4中，您可以使用类
px-0
，它代表
左填充：0；右填充：0；
。实际上最合适的是
class=”容器流体p-0“
在
bootstrap4
中使用
img流体
而不是
img responsive
我将避免在Bootstrap中破坏正常的类流（始终在
行中插入
.col
）。从容器或列中删除填充似乎是更好的方法。另一个选项是完全删除所有引导类（
.container
、
.row
和
.col
）然后在下一节中打开一个
.container
。使用css删除填充只需添加一些不必要的代码和重载到页面，覆盖填充对我的解决方案没有任何好处，如果有，请告诉我。（如果您的设计师愿意，使用不带
的
.row
没有什么错，如果不带
的
.col
没有什么错。row
是错误的，因为
浮动
）另外，删除
.container
是不可能的，因为您添加了
.container
类，因为您想设计盒式视图。没有
.container
的话，宽度没有限制，除非您定义了您的容器，例如：my container，这是错误和不必要的。我不建议在虽然是
.row
，但事实上我的意思是尽量坚持
.container
.row
.col
结构。如果你有信心不在
.row
中插入
.col
，当然你可以这样做，也许你不会有任何问题，但根据我的经验，最好避免我知道你不建议在没有
.row
的情况下插入
.col
，我添加了这些信息以使我的评论更有用（希望如此）是的，你的解决方案也很有效，事实上，公认的答案与你的解决方案类似，关于灵活性，这取决于，编辑css而不是编辑html（为了改变结构，正如你所提到的）并不总是容易，我想我的解决方案比你的解决方案的唯一优势是html标记和css更少，仅此而已
<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>

<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>