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

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

我希望图像看起来像它在完整尺寸下的样子，即使在最小化之后图像也不会被拉伸。

当我删除样式时，我能够在没有拉伸的情况下获得上述图像的视图：width:100%;身高：70%；但是在全尺寸窗口中，图像之间有空格。

请帮我解决这个问题。

Answer 1

使用

class="img-responsive"

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

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

到您的图像元素。

你需要失去你的内联样式

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

因为它们会覆盖其他所有内容（Protip：永远不要使用它们）。

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

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

Here 是一个示例代码笔。

Answer 2

@FredRocha 嘿 Fred，我尝试仅使用 img-reponsive 并丢失了内联样式，但随后图像在全屏窗口大小下看起来像这样：

Example image

Answer 3

也许向图像添加 img-responsive 类可以解决问题。