フォースWordpressの画像ブートストラップ

Question

を使用して、アップロードのサイズにもかかわらず、同じ高さを持っている私はこのようなWordpressので出力画像にいくつかのコードを持っている...

<div class="col-md-2"> 

<?php $image = get_field('artist_photo'); 
     if(!empty($image)): 
     // thumbnail 
     $size = 'medium'; 
     $thumb = $image['sizes'][ $size ]; 
     ?> 
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" class="img-responsive" /> 

</div> 

<?php endif; ?> 

問題は、すべての画像は、異なる高さを（に基づいている、あります元のアップロードでのそれらの割合}。

は彼らが応答残りながら、均一な高さがあることを確認してくださいすることが可能ですか？

Answer 1

ここでは、CSSで画像の高さを制限するには、2つの方法がある。

まず、最大の高さを設定できます。だから、のようなもの：

.col-md-2 img { 
    display: block; 
    max-height: 300px; 
    width: auto; 
    height: auto; 
} 

第二に、あなたは背景画像として画像を表示し、それを制約するbackground-sizeプロパティを使用することができます。

.col-md-2 { 
    height: 300px; 
} 

.col-md-2 div.image { 
    height: 100%; 
    width: 25%; // for example, assuming you want 4 images per row 
    background-size: constrain; 
} 

私は、これはブートストラップのコンテキストで動作するかわからないんだけど、オプション2はあなただけかもしれない：そうは次のように

<div class="image" style="background: url(<?php echo $thumb; ?>) no-repeat center;" /> 

とスタイルを：あなたのマークアップで使用して画像を表示画像またはその親の明示的な高さを指定できない場合は、このオプションを使用します。

詳細にはより多くの悪魔があり、具体的な内容は状況によって異なりますが、うまくいけば助かります。