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

我希望图像看起来像完整尺寸的样子，即使在没有图像拉伸的情况下最小化。

当我删除样式时，我能够获得上面图像的视图而不会拉伸：宽度：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嘿弗雷德，我试过只使用img-reponsive＆amp;丢失内联样式，但随后图像看起来像全屏窗口大小：

Example image

Answer 3

也许在图片中添加 img-responsive 类可以解决问题。

并排设置图像＆amp;在bootstrap中响应

3 个答案: