Bootstrap 3 縮略圖：垂直和水平居中的圖像

Question

我有幾個 Bootstrap 3 縮略圖。 我希望它們的大小相同，所以我固定了它們的高度和寬度。 它們將顯示不同大小和比例的不同圖像，我希望它們垂直和水平居中。 當圖像太大而無法放入其容器時，我希望將其縮小。

我找到了使用transform: translate(-50%, -50%);的部分解決方案transform: translate(-50%, -50%); 在這篇方便的帖子中，但它不適用於平板電腦或 jsfiddle 等網站。 事實上，固定高度在那里也不起作用。 我試圖找出一個良好的跨瀏覽器兼容性。

jsfiddle 鏈接

 @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 - 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%;}