如何处理引导图像网格中的肖像图像

Question

我在创建带有纵向图像的引导网格时遇到了问题。当我使用肖像图像时，它看起来并不好。如果我只使用风景图像，它看起来应该是这样。我该如何解决这个问题？

代码如下：

<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

Answer 1

显然，bootstrap 会将响应式图像拉伸 100% 宽，但不会限制它们的高度。因此，具有不同纵横比的图像最终会具有不同的高度（并且网格会中断）。

显而易见的解决方案是在图像容器上设置一个固定的高度，并将容器内的图像约束 + 居中。

• Updated Fiddle #1
  固定容器高度 - 200 像素（注意窄屏幕上的宽图像会发生什么）

但是，这会产生另一个问题：容器的纵横比现在取决于屏幕宽度；在更宽的屏幕上它会变得更宽，在窄屏幕上它会变得更高，有时与图像相比太高了。

我建议使用固定纵横比的容器并在其中约束 + 居中图像。

@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（容器随屏幕宽度成比例增长）

Answer 2

如果您希望图像高度保持 226 像素，但要调整图像大小并保持其纵横比，我认为您需要切换到使用背景图像，而不是 <img> 标签。

Fiddle

HTML：

<a href="#" style="background-image: url(http://placehold.it/400x266);"></a>

CSS：

.thumbnail > a {
    display: block;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 266px;
}