使用bootstrap将图像拟合到屏幕上的div

Question

我最近问了一个问题，a与此有关，但我仍然需要一些帮助。现在我已经完成了这一部分，我想知道如何使这些图像在各自的div中适合浏览器的大小。因此，页面将只是3个并排的图像，没有向上或向下滚动。我认为拥有一个"容器流体类"在这方面会对我有所帮助，但事实并非如此。我不在乎图像的质量，因为我将使用非常高清的照片，但如果在这方面有什么需要我记住的，请随时通知我。以下是迄今为止的代码：

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
        <img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
    </div>
         <div class="col-md-4">
        <img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
         </div>
        <div class="col-md-4">
        <img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
        </div>
</div>
</div>

Answer 1

您可以将一些类添加到html:

<div class="imageContainer container-fluid">
<div class="row">
    <div class="ImageColumn col-md-4">
        <img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
    </div>
    <div class="ImageColumn col-md-4">
        <img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
    </div>
    <div class="ImageColumn col-md-4">
        <img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
    </div>
</div>

以及一些css:

 .imageContainer {
    height:100%;
    position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
    height:100%;
    padding:0;
}
.imageContainer .ImageColumn img {
    width:100%;
    height:100%;
}

这是Fiddle

但我必须警告你，真实照片的效果可能会因为图像拉伸而看起来很糟糕：例如

UPD:

正如注释中所建议的那样，您可以将类更改为col-xs-4，这样它在所有设备上的行为都相同。

更新2：

我添加了一些类似的东西，比如Ihover方形效果4，但没有旋转。这需要对css转换进行相当大的更改。以下是示例：

链接