并排设置图像并在引导程序中响应

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>

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

在此处输入图片说明

现在，当窗口大小最小化时，图像如下所示：

在此处输入图片说明

我希望图像在不缩小图像的情况下最小化后也能以完整尺寸显示。

当我删除样式时，我能够获得上面图像的视图而不会被拉伸：width：100％; 高度：70％; 但随后在全尺寸窗口中，图像之间会留有空白。

请帮助我进行排序。

Answer 1

使用

class="img-responsive"

将使您的图像在所有设备上都能响应。 具体来说，根据Bootstrap的文档 ，它将添加

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

您的图像元素。

您将需要失去内联样式

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

因为它们会覆盖其他所有内容（提示：请勿使用它们）。

最后，如果您不希望图像之间留有空白，则需要强制删除每列的填充。 例：

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

这是示例代码笔。

Answer 2

@FredRocha嗨，弗雷德，我尝试仅使用img-responsive并丢失了内联样式，但是在全屏窗口大小下，图像看起来像这样：

范例图片

Answer 3

也许将img响应类添加到图像将解决此问题。