Заставьте изображения WordPress иметь одинаковую высоту, несмотря на размеры загрузки, используя Bootstrap
У меня есть код для вывода изображений в 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; ?>
Проблема в том, что все изображения имеют разную высоту (в зависимости от их пропорций при исходной загрузке).
Можно ли сделать так, чтобы они имели одинаковую высоту, оставаясь при этом отзывчивыми?
Решение
Вот два способа ограничить высоту изображения в 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 может быть вашим единственным вариантом, если вы не можете указать явную высоту для изображения или его родителя.
В деталях больше дьяволов, и специфика будет зависеть от вашей ситуации, но, надеюсь, это полезно.
Другие решения
Других решений пока нет …