CSS 图像未根据 Bootstrap 列大小调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24705683/
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
Images not resized based on Bootstrap column size
提问by HymanTheKnife
My goal is to display 4 images per row. Code below:
我的目标是每行显示 4 张图像。代码如下：
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="{site_url}scents/baobab/pearls/black-pearls"><img src="{site_url}images/products/4906_1.jpg"></a>
</div>
</div>
And I expect too see images resized based on column style from Bootstrap, but what I'm getting are overlapping full images .
我也希望看到基于 Bootstrap 列样式调整大小的图像，但我得到的是重叠完整图像。
Any clue what is going on?
任何线索是怎么回事？
回答by henrywright
Try adding this to your stylesheet:
尝试将其添加到您的样式表中：
img {
width: 100%;
}
Update:As an alternative (as pointed out in this answer's comments by @JasonAller), you could add class="img-responsive"to each imgelement. This applies max-width: 100%;and height: auto;to the image so that it scales nicely to the parent element. See the Bootstrap docsfor more info.
更新：作为替代方案（如@JasonAller 在此答案的评论中指出的那样），您可以添加class="img-responsive"到每个img元素。这适用于max-width: 100%;和height: auto;图像，以便它可以很好地缩放到父元素。有关更多信息，请参阅Bootstrap 文档。
update for bootstrap v4
更新引导程序 v4
The classname for bootstrap v4 is img-fluid
Bootstrap v4 docs
bootstrap v4 的类名是img-fluid
Bootstrap v4 docs
回答by Ray Koren
With Bootstrap 4 you must use use class="img-fluid", class="img-responsive" will work in 3.x.
对于 Bootstrap 4，您必须使用 class="img-fluid"，class="img-responsive" 将在 3.x 中工作。
回答by Nookeen
Sometimes on dynamic content when you have no control over what users put in, class="img-responsive" would not work. And 'width: 100%' for each image is tricky as well. So I am using:
有时在动态内容上，当您无法控制用户输入的内容时， class="img-responsive" 将不起作用。每个图像的“宽度：100%”也很棘手。所以我正在使用：
img {max-width: 100%;}
回答by Katia Punter
Beware that bootstrap columns have padding as well; that may be unexpected.
请注意引导列也有填充；这可能出乎意料。
The following:
下列：
div class="col-sm-6" style="padding:0"
worked for me.
为我工作。
回答by Juano
If you want, you can use the width tag in the html element, for example:
如果需要，可以在 html 元素中使用 width 标签，例如：
<img width="60%" src="...">
I find it more useful, since you can play with the percentage until you have the desired size.
我发现它更有用，因为您可以使用百分比直到获得所需的大小。
