【问题标题】：Images not resized based on Bootstrap column size未根据 Bootstrap 列大小调整图像大小
【发布时间】：2014-09-02 13:09:51
【问题描述】：

我的目标是每行显示 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>

我也希望看到基于 Bootstrap 列样式调整大小的图像，但我得到的是重叠的完整图像。

有什么线索吗？

【问题讨论】：

标签： css image twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

解决方案是使用<picture> 和<source> 标签。只需确保为各种屏幕准备不同尺寸的图像即可。

https://www.w3schools.com/tags/att_source_media.asp

【讨论】：

与问题不完全相关，因为它指定使用引导程序，但可以在某些情况下使用。

【解决方案2】：

尝试将其添加到您的样式表中：

img {
    width: 100%;
}

更新： 作为替代方案（正如@JasonAller 在此答案的 cmets 中指出的那样），您可以将 class="img-responsive" 添加到每个 img 元素中。这会将max-width: 100%; 和height: auto; 应用于图像，以便它很好地缩放到父元素。请参阅Bootstrap docs 了解更多信息。

bootstrap v4 更新

bootstrap v4 的类名是img-fluid
Bootstrap v4 docs

【讨论】：

与在<img> 元素上使用class="img-responsive" 相比，添加它有什么好处？
除了更少的标记之外没有其他好处。添加 img-responsive 类也可以，您只需要记住为每张图片都这样做。
也许你应该尝试使用 max-width 来避免图像拉伸。
class="img-responsive" 为我做了。正如 Katia Punter 在下面建议的那样，我还必须将 style="padding:0" 添加到包含的 div 中，以获得不太小的好结果。

【解决方案3】：

如果需要，可以在html元素中使用width标签，例如：

    <img width="60%" src="...">

我发现它更有用，因为您可以使用百分比，直到获得所需的大小。

【讨论】：

这不是一个响应速度非常快的解决方案。考虑到 Bootstrap 是一个响应式框架。

【解决方案4】：

注意引导列也有填充；这可能是出乎意料的。

以下内容：

div class="col-sm-6" style="padding:0"

为我工作。

【讨论】：

【解决方案5】：

使用 Bootstrap 4，您必须使用 use class="img-fluid"，class="img-responsive" 将在 3.x 中工作。

【讨论】：

【解决方案6】：

有时在动态内容上，当您无法控制用户输入的内容时，class="img-responsive" 将不起作用。每个图像的“宽度：100%”也很棘手。所以我正在使用：

img {max-width: 100%;}

【讨论】：