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 docs。

Answer 2

使用Bootstrap 4你必须使用use class =“img-fluid”，class =“img-responsive”将在3.x中使用。

Answer 3

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

img {max-width: 100%;}

Answer 4

请注意，bootstrap列也有填充;这可能是意料之外的。

以下内容：

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

为我工作。

Answer 5

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

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

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

Answer 6

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

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

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

6 个答案: