Html 使用引导将图像安装到屏幕上的div

我最近发现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>

---

您可以将一些类添加到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>

这是你的电话号码

但我必须警告你，由于图像拉伸，真实照片的结果可能看起来很糟糕： UPD： 正如注释中所建议的，您可以将类更改为col-xs-4，以便它在所有设备上的行为都相同

UPD 2： 我添加了类似Ihover正方形效果4的东西，但没有旋转。 它需要对css转换进行相当大的更改。 以下是一个例子：

---

太棒了！我还有一个问题，我似乎无法用它来包装图像而不是实际图像。使用img responsive时将图像高度设置为100%（增加100%宽度）不正确。图像将始终被扭曲。@cmcas发布的代码是正确的。如果您想让3个图像始终在一行中，只需将列类从col-md-4更改为col-xs-4即可。@JoeConlin-我在回答中警告了cmcas关于图像拉伸的问题。此外，我认为他还询问了图像之间没有填充的全高问题。cmcas-您想在图像上提供的链接上具有悬停效果吗？是的，我已将图像放置到相应的“ihover”中“上课，但不抽雪茄@JoeConlin-Maksym是正确的。我不明白为什么有人会允许图像失真，但如果没有人担心，那么是的，使用@MaksymStepanenko建议的方法将有效。话虽如此，同时应用.col-xs-4将使这些图像在手机上几乎无法识别。

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