Force Wordpress изображения имеют одинаковую высоту, несмотря на размеры, загруженные с помощью Bootstrap

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.

Во-первых, вы можете установить максимальную высоту. Так что-то вроде:

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

Во-вторых, вы можете отобразить изображение в качестве фонового изображения, а затем использовать background-size свойство, чтобы ограничить его. В разметке отображения изображения с помощью:

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

И стиль это так:

.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 может быть вашим единственным если вы не можете указать явную высоту для изображения или его родителя.

В деталях есть больше дьяволов, и специфика будет зависеть от вашей ситуации, но, надеюсь, это полезно.