Twitterのブートストラップサムネイルの高さを設定するにはどうすればよいですか？

Question

私の個人用ウェブサイトのサムネイルモジュールの設定に問題があります。私は自分のプロジェクトにTwitterのブートストラップ（3.0）を使用しています。サムネイルモジュールの設定を完了できません。

幅は問題ありませんが、サムネイルの高さを設定することはできません（すべてのサムネイルを同じ高さに揃えることはできません）。

すべてのサムネイルに対して1つの（標準）高さを設定し、画像を拡大せずにすべての領域を満たすことができるように画像を中央にズーム/スケールする方法はありますか？

<div class="row"> 
<!-- Thumbnail 0 --> 
<div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="img.png" alt="..."> 
    </a> 
    <div class="caption"> 
     <h4>Arctic MX-2, 8g</h4> 
    </div> 
</div><!-- /thumbnail 0 --> 
<!-- Thumbnail 1 --> 
<div class="col-sm-6 col-md-3"> 
    <a href="#" class="thumbnail"> 
     <img src="blue.png" alt="..."> 
    </a> 
    <div class="caption"> 
     <h4>Arctic MX-2, 8g</h4> 
    </div> 
</div><!-- /thumbnail 1 --> 
</div><!-- /thumbnail --> 

Answer 1

いずれかのCSSの：

.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire 

またはインライン：SCSSで

<img src="img.png" alt="..." style="min-height:50px;height:50px;" /> 

Answer 2

、あなたは単に行えます

@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }} 
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }} 
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }} 

Answer 3

ねえ、私はあなたの質問を見ていました私はsaを持っていたのでBootstrapの私の問題で、<div>の高さのいずれかが他のものよりも高い場合、グリッドは正しく表示されません。私はサムネイルの整列の問題を解決する方法を考え出しました。多くの人がCSSのFlexプロパティを使用できると思います。

class="row"には、style="display:flex; flex-wrap: wrap;"が追加されました。

<div class="row" style="display:flex; flex-wrap: wrap;"> 
    <div class="col-sm-3"> 
    <div class="thumbnail"> 
     <img src="http://lorempixel.com/500/300" style="width:200px"> 
     <div class="caption"> 
     <h4>Some thumbnail heading</h4> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3"> 
    <div class="thumbnail"> 
     <img src="http://lorempixel.com/500/300" style="width:200px"> 
     <div class="caption"> 
     <h4>Some thumbnail heading</h4> 
     </div> 
    </div> 
    </div> 
    .. any number of thumbnails you want 
</div> 

ですから、別のサムネイルの高さを持つことができ、それはそうでないかもしれないjQuery Masonryが、少なくとも、より良いよう、適切に表示されます。基本的に、私のコードは次のようになります。