html - 并排设置图像并在 Bootstrap 中响应

Question

我写了一个代码，其中 4 个图像在 cols 中并排保存在 div 中。

代码如下:

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" />
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
        </div>
</div>

这在全尺寸窗口中看起来像这样:

enter image description here

现在当窗口尺寸最小化时，图像看起来像这样:

enter image description here

我希望图像即使在最小化后也能保持完整尺寸的样子，而不会拉伸(stretch)图像。

当我删除样式时，我能够看到上面的图像而不会被拉伸(stretch):width:100%;高度:70%；但是在全尺寸窗口中，图像之间有空白。

请帮我解决这个问题。

Answer 1

使用

class="img-responsive"

将使您的图像跨设备响应。具体而言，根据 Bootstrap's documentation , 它将添加

max-width: 100%;
height: auto;
display: block;

到你的图像元素。

您将需要丢失内联样式

style="width:100%; height:70%;"

因为它们会覆盖其他所有内容(提示:永远不要使用它们)。

最后，如果您不希望图像之间出现空白，则需要强制移除每列的填充。示例:

div.col-xs-3 {
    padding: 0;
}

Here是一个示例代码笔。