未根据 Bootstrap 列大小调整图像大小

Question

我的目标是每行显示 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 的列样式调整大小的图像，但我得到的是重叠的完整图像。

有什么线索吗？

原文由 JackTheKnife 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 img {
    width: 100%;
}

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

引导程序 v4 的更新

bootstrap v4 的类名是 img-fluid

引导 v4 文档

原文由 henrywright 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Ray Koren 发布，翻译遵循 CC BY-SA 3.0 许可协议