我最近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>
最佳答案
您可以向您的 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
关于html - 使用 Bootstrap 将图像调整到屏幕上的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28858537/