同じ高さに拡大された画像のセンタリング

Question

私はブートストラップグリッド内のすべての画像を画像wrapperを使用して同じ高さにしてから、幅を独立して調整することでネイティブのアスペクト比を保持します。今、私は水平にレイアウトを整えるために、divにそれらを中央に配置したいと思います。私は下記のimage-containerクラスを使用しようとしましたが、それを適用しました（現在は消えてしまいます）。おそらく、ラッパーのプロパティを使用して画像を水平に中央に配置する方法はありますか？私は役に立つナッジに感謝します。ありがとう！

• 水平に画像を中央
• （以下スニペットに見られるように）応答異なるアスペクト比を有する同じ高さにスケーリングされた画像を保持する：私は成功した方法を探してい

  （上記のポイント）

イメージが同じ高さに応じてどのように拡大縮小されるかについては、下のスニペットを参照してください。コメントアウトされたimage-container divは、スケーリング後に画像を水平に中央に配置しようとして失敗した試みの1つです。 justify-content: centerとの組み合わせで

.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は実際にセンターあなたのイメージを行います。問題は、Flex内absolute positioningを持っているということです。単純に上記のコードを削除

.img-wrapper img { 
    position: absolute; 
} 

は、あなたのイメージを中心にされることになります。これらはposition: absoluteの除去には効果がありませんように、あなたはおそらくもtopとleftを削除したいと思うことに注意してください：

.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>

ホープ、このことができます！ :)