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

Posted 2023-03-05

【中文标题】拉伸图像以适应整个容器宽度引导程序

【英文标题】：Stretch image to fit full container width bootstrap

【发布时间】：2016-08-24 07:20:54

【问题描述】：

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

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

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

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

【问题讨论】：

row类必须嵌套在container类中，将顺序改为.container > .row > .col

这让我的形象变得更小了

pocockn 只有在您同意它更优越的情况下，您才可以考虑接受@Poikilos 的回答，以便将来访问此页面的访问者受益

【参考方案1】：

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

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

查看已关闭问题：https://github.com/twbs/bootstrap/issues/20830

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

【讨论】：

如果您要遵循引导程序简单的网格规则而不是使用覆盖来破解它，这当然是正确的答案。

这是最引导的答案恕我直言。但一个问题是它会导致滚动条。

【参考方案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"  class="img-responsive" />
    </div>
  </div>
</div>

CSS

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

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

完整示例here。

---

@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"  class="img-responsive" />
    </div>
   </div>
</div>

更新示例here。

【讨论】：

在 Bootstrap 4 中，您可以使用代表 padding-left: 0; padding-right: 0; 的类 px-0。 Reference

其实最合适的应该是class="container-fluid p-0"

在bootstrap4 中使用img-fluid 而不是img-responsive

【参考方案3】：

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

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

附：我正在使用 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>

【参考方案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" >           

</div>

【参考方案5】：

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

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

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

【讨论】：

我会避免破坏 Bootstrap 中的正常类流（总是在 .row 中插入 .col）。从容器或列中删除填充似乎是一种更好的方法。另一种选择是完全删除所有引导类（.container、.row 和.col），然后在下一部分打开.container。

使用 css 删除填充只是向页面添加一些不必要的代码和重载，覆盖我的解决方案没有任何好处，如果有的话，请告诉我。 （使用.row 而不使用.col 并没有错，如果您的设计师想要，使用.col 而不使用.row 是错误的，因为float）也删除了@987654336 @ 是不可能的，因为您添加 .container 类是因为您想设计盒装视图。没有.container 就没有width 的限制，除非你定义你的容器，例如：my-container，这是错误和不必要的。

我不建议在没有.row 的情况下插入.col，实际上我的意思是坚持.container > .row > .col 结构一样多你可以。如果您有信心不在.row 中插入.col，那么您当然可以这样做，也许您不会有任何问题，但根据我的经验，最好避免使用它，以便能够更改结构将来如果需要。

我知道您不建议插入没有.row 的.col，我添加了该信息以使我的评论更有用（希望如此）。是的，您的解决方案也有效，实际上接受的答案与您的解决方案相似，关于灵活性，这取决于编辑 css 而不是编辑 html（为了更改结构，如您所提到的）总是更容易，我认为我的解决方案比你的解决方案的唯一优势是更少的 html 标记和 css，仅此而已

【参考方案6】：

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

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