Bootstrap 3缩略图：垂直和水平居中的图像

Question

我有几个 Bootstrap 3 缩略图。我希望它们的大小相同，所以我已经固定了它们的高度和宽度。他们将显示不同大小和比例的不同图像，我希望它们垂直和水平居中。当图像太大而无法放入其容器中时，我希望将其缩小。

我在this handy post 中找到了使用transform: translate(-50%, -50%); 的部分解决方案，但它不适用于平板电脑或jsfiddle 之类的网站。事实上，固定高度在那里也不起作用。我正在尝试找出良好的跨浏览器兼容性。

jsfiddle link

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}

img
{
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    <div class="row">
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
    <div class="thumbnail">
      <img src="http://animalia-life.com/data_images/mammal/mammal4.jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
  </div>

有什么想法吗？

Answer 1

首先，您的 css 会更改每个图像，而不仅仅是缩略图中的图像，这不是一个好习惯。但是我使用您当前的代码来提出答案。

.thumbnail img { height:100px; width:100%;}

您需要将宽度定义为 100% 并为其指定特定高度。然后，您需要为图像添加响应能力。添加 img 响应类。您还需要将图像居中，并且 bootstrap 3 会为您在课堂上做到这一点：center-block

<img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">

jsfiddle

要保持缩略图高度相同：helpful Link

Jsfiddle - 2

---

   <div class="row">
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
     <div class="thumbnail">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
       <div class="caption">
         <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
         <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
  </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image" class="img-responsive center-block">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

  </div>

你的CSS：

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}
.thumbnail img { height:100px; width:100%;}