將縮放到相同高度的響應圖像置於中心

Question

我使用圖像wrapper將自舉網格中的所有圖像製作爲相同高度，然後通過讓它們的寬度獨立縮放（請參閱下面的代碼段）來保留它們的原始縱橫比。現在我想將它們水平放置在它們的divs中，以使佈局更整潔。我嘗試使用下面的image-container類，但它在我應用它的各種div中沒有工作（目前只是讓它們消失）。有沒有辦法使用包裝屬性來水平居中圖像？我會很感激任何有用的推動。謝謝！

我正在尋找一個成功的方法：

• 保持響應擴展到具有不同縱橫比相同的高度（如以下所述摘錄）圖像
• 水平居中的圖像同時保留其響應的縮放比例（上面的點）

請參閱下面的代碼片段，瞭解如何將圖像響應地縮放到相同的高度;註釋掉image-container div是我在縮放後水平居中圖像的嘗試之一。

.thumbnail img{ 
 
     max-width: 100%; /* do not stretch the bootstrap column */ 
 
    } 
 

 
    .img-wrapper { 
 
     position: relative; 
 
     padding-bottom: 130%; 
 
     overflow: hidden; 
 
     width: 100%; 
 
    } 
 

 
    .img-wrapper img { 
 
     position: absolute; 
 
     top:0; 
 
     left:0; 
 
     width:auto; 
 
     height:100%; 
 
    } 
 

 
    .image-container { 
 
     display: flex; 
 
     justify-content: center; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <!--<div class="image-container">--> 
 
      <div class="thumbnail"> 
 
      <div class="img-wrapper"> 
 
       <img src="http://via.placeholder.com/150x300"/> 
 
      </div> 
 
      </div> 
 
     <!--</div>--> 
 
     </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <!--<div class="image-container">--> 
 
     <div class="thumbnail"> 
 
      <div class="img-wrapper"> 
 
      <img src="http://via.placeholder.com/200x350"/> 
 
      </div> 
 
     </div> 
 
     <!--</div>--> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
     <!--<div class="image-container">--> 
 
     <div class="thumbnail"> 
 
      <div class="img-wrapper"> 
 
      <img src="http://via.placeholder.com/150x300"/> 
 
      </div> 
 
     </div> 
 
     <!--</div>--> 
 
    </div> 
 
    </div>

Answer 1

display: flex結合justify-content: center實際上確實中心您的圖像;問題是，你有absolute positioning柔內：

.img-wrapper img { 
    position: absolute; 
} 

只需去除上面的代碼將導致您的圖像爲中心。請注意，您可能還需要刪除top和left，因爲這些將與去除position: absolute沒有影響：

.thumbnail img { 
 
    max-width: 100%; 
 
    /* do not stretch the bootstrap column */ 
 
} 
 

 
.img-wrapper { 
 
    position: relative; 
 
    padding-bottom: 130%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.img-wrapper img { 
 
    /* position: absolute; 
 
    top: 0; 
 
    left: 0; */ 
 
    width: auto; 
 
    height: 100%; 
 
} 
 

 
.image-container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
    <div class="image-container"> 
 
     <div class="thumbnail"> 
 
     <div class="img-wrapper"> 
 
      <img src="http://placehold.it/150x300" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
    <div class="image-container"> 
 
     <div class="thumbnail"> 
 
     <div class="img-wrapper"> 
 
      <img src="http://placehold.it/200x350" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
 
    <div class="image-container"> 
 
     <div class="thumbnail"> 
 
     <div class="img-wrapper"> 
 
      <img src="http://placehold.it/150x300" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

希望這有助於！ :)