Html 拉伸图像以适合整个容器宽度的引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36933107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretch image to fit full container width bootstrap
提问by pocockn
I have an image that's 1300px wide, using bootstrap I want this image to fill the full width of my container which is set to 1300px. I create a row, give it a full 12 columns and then add in the image with a class of image responsive. With this set up I get the output below.
我有一个 1300 像素宽的图像，使用引导程序我希望这个图像填充我设置为 1300 像素的容器的整个宽度。我创建了一行，给它一个完整的 12 列，然后在图像中添加一类图像响应。有了这个设置，我得到了下面的输出。
I want my image to stretch all the way along to where my image is in my content, here is my code.
我希望我的图像一直延伸到我的图像在我的内容中的位置，这是我的代码。
<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>
The image is set to width 100% so not sure why it isn't filling the container.
图像设置为宽度 100%，所以不确定为什么它没有填充容器。
回答by Poikilos
In bootstrap 4.1, the w-100 class is required along with img-fluid for images smaller than the page to be stretched:
在 bootstrap 4.1 中，对于小于要拉伸的页面的图像，需要 w-100 类和 img-fluid：
<div class="container">
<div class="row">
<img class='img-fluid w-100' src="#" alt="" />
</div>
</div>
see closed issue: https://github.com/twbs/bootstrap/issues/20830
请参阅已关闭的问题：https: //github.com/twbs/bootstrap/issues/20830
(As of 2018-04-20, the documentation is wrong: https://getbootstrap.com/docs/4.1/content/images/says that img-fluid applies max-width: 100%; height: auto;" but img-fluid does not resolve the issue, and neither does manually adding those style attributes with or without bootstrap classes on the img tag.)
（截至 2018-04-20，文档是错误的：https: //getbootstrap.com/docs/4.1/content/images/说 img-fluid 应用 max-width: 100%; height: auto;" 但 img -fluid 不能解决问题，也不能在 img 标签上手动添加带有或不带有引导程序类的样式属性。）
回答by sQer
Check if this solves the problem:
检查这是否解决了问题：
<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
CSS
.no-padding {
padding-left: 0;
padding-right: 0;
}
Css class no-paddingwill override default bootstrap container padding.
CSS 类no-padding将覆盖默认引导容器填充。
Full example here.
完整示例在这里。
@UpdateIf you use bootstrap 4 it could be done even simpler
@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" alt="placeholder 960" class="img-responsive" />
</div>
</div>
</div>
Updated example here.
在这里更新了示例。
回答by user11023470
First of all if the size of the image is smaller than the container, then only "img-fluid" class will not solve your problem. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100". keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default. make sure to set them to 0.
首先，如果图像的大小小于容器，那么只有“img-fluid”类不能解决您的问题。您必须将图像的宽度设置为 100%，为此您可以使用 Bootstrap 类“w-100”。请记住，默认情况下，“container-fluid”和“col-12”类将左右填充设置为 15px，“row”类将左右边距设置为“-15px”。确保将它们设置为 0。
Note:"px-0" is a bootstrap class which sets left and right padding to 0 and
"mx-0" is a bootstrap class which sets left and right margin to 0
注意：“px-0”是一个引导类，它将左右填充设置为0，
“mx-0”是一个引导类，将左右边距设置为0
P.S. i am using Bootstrap 4.0 version.
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>
回答by Mehdi Dehghani
containerclass has 15px left & right padding, so if you want to remove this padding, use following, because rowclass has -15px left & right margin.
containerclass 有 15px 左右边距，所以如果你想删除这个 padding，请使用以下内容，因为rowclass 有 -15px 左右边距。
<div class="container">
<div class="row">
<img class='img-responsive' src="#" alt="" />
</div>
</div>
Codepen: http://codepen.io/m-dehghani/pen/jqeKgv
代码笔：http://codepen.io/m-dehghani/pen/jqeKgv
