イメージはブートストラップグリッドで同じサイズになります

Question

私はブートストラップグリッドシステムを使ってそれぞれ3つのイメージを含む3行のイメージギャラリーを作成しています。すべての画像のサイズが異なります。私がしようとしているのは、すべての画像を同じサイズにすることです。 CSSでmax-heightまたはmax-widthを使用しようとしましたが、すべての画像（サムネール）を同じサイズにするのには役立ちませんでした。 サムネイルクラスのリグを取得するだけですか、別のソリューションですか？

body { 
 
     padding-top: 70px;} 
 
    .row .flex { 
 
    display: inline-flex; 
 
    width: 100%;} 
 
    img { 
 
    width:100%; 
 
    min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> 
 
      </div> 
 
     </div> 
 

 
     <div class="row flex match-to-row"> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> 
 
      </div> 
 
      </div> 
 
    </div> 
 
    </div>

Answer 1

CSSクラスIMG応答すべての画像を追加します。

Answer 2

だけで、これを変更します。

img { 
    width: 100px; // how much you want 
    min-height: 100px; 
    float: left; 
    margin: 10px; 
} 

Answer 3

私はあなたが探しているプロパティは、object-fitプロパティがどのようにあなたが作るために、背景画像の上にbackground-size: coverを使用してしまうと同じように動作しますobject-fit

img { 
    width: 200px; /* You can set the dimensions to whatever you want */ 
    height: 200px; 
    object-fit: cover; 
} 

だと思いますそれは伸張せずにページを埋める。こうすることで、すべての画像が画像に歪みを生じさせることなく同じサイズであることを保証するために、ルールの幅を定義することができます。

このプロパティで使用できる他の値が含まれています：

• fill - イメージを伸ばします。
• contain - イメージの縦横比を保持します。
• cover - ボックスの高さと幅を入力します。
• none - 元のサイズを維持します。
• scale-down - noneとcontainの違いを比較して、最小のオブジェクトサイズを見つけます。

object-fit | CSS-Tricks