我在创建带有肖像图像的 Bootstrap 网格时遇到了问题。当我使用肖像图像时,它看起来不太好。如果我只使用横向图像,它看起来应该是这样。我该如何解决这个问题?
代码如下:
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/266x400" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<div class="thumbnail" href="#">
<a href="#"><img class="img-responsive" src="http://placehold.it/175x266" alt=""></a>
<div class="caption">
<a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
</div>
</div>
</div>
这里是 Fiddle
最佳答案
显然,bootstrap 会将响应式图像拉伸(stretch) 100% 宽,但不会限制它们的高度。因此,具有不同宽高比的图像最终将具有不同的高度(并且网格中断)。
显而易见的解决方案是在图像容器上设置一个固定高度,并在容器内约束+居中图像。
- Updated Fiddle #1
固定容器高度 - 200 像素(注意宽图像在窄屏幕上会发生什么情况)
然而,这会产生另一个问题:容器的纵横比现在取决于屏幕宽度;在较宽的屏幕上它会变得更宽,而在窄屏幕上它会变得更高,有时 toooooo 与图像相比高。
我建议使用固定纵横比的容器,并在其中约束+居中图像。
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");
.thumbnail {
display: block;
padding-bottom: 100%;
position: relative;
}
.thumbnail > .img-responsive {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery (Square Container)</h1>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/300x400" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/300x400" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/640x360" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/600x200" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/640x360" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/200x600" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/200x200" alt=""></a>
</div>
</div>
</div>
- Updated Fiddle #2
固定容器纵横比 - 4:3(容器随屏幕宽度按比例增长)
关于html - 如何处理 Bootstrap 图像网格中的肖像图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27229847/