html - 使用 Bootstrap 将图像调整到屏幕上的 div

Question

我最近asked a 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

但我必须警告你，由于图像拉伸(stretch)，真实照片的结果可能看起来很糟糕:Example

更新:

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

更新 2:

我添加了类似于 Ihover square effect 4 但没有旋转的东西。它需要对 css 转换进行相当大的更改。这是示例:

Link