未根据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的列样式调整图像大小,但我得到的是重叠完整图像.

有什么线索是怎么回事？

Answer 1

尝试将其添加到样式表:

img {
    width: 100%;
}

更新:作为替代方案(正如@JasonAller在本回答的评论中指出的那样),您可以添加class="img-responsive"到每个img元素.这适用max-width: 100%;以及height: auto;对图像,使其很好地扩展到父元素.有关详细信息,请参阅Bootstrap文档.

Answer 2

使用Bootstrap 4,你必须使用use class ="img-fluid",class ="img-responsive"将在3.x中使用.

Answer 3

有时在动态内容上,当您无法控制用户输入的内容时,class ="img-responsive"将无效.并且每张图片的"宽度:100%"也很棘手.所以我正在使用:

img {max-width: 100%;}