Сетка начальной загрузки с разной высотой изображения
Я работаю над динамической сеткой обложек альбомов с CSS и Bootstrap 3, и все работает отлично, когда все изображения масштабируются 1: 1. Но когда происходит изображение, которое не масштабируется таким образом, моя сетка разрывается. Вот скриншот моей проблемы:
Код для создания сетки выглядит следующим образом:
<div class="row">
<div class="col-md-6 panel panel-default" v-for="result in results">
<img src="{{ result.art }}" />
<strong>{{ result.title }}</strong>
<br />
from <strong>{{ result.album }}</strong>
<br />
by <strong>{{ result.artist }}</strong>
</div>
</div>
Я использую Vue.js для этого шаблона.
Поэтому я не могу поместить два таких столбца col-md-6 в один ряд, но когда я цепью столбцов, сетка разрушается
Есть ли способ получить правильную сетку с такими изображениями? Мне не нужно что-то вроде стиля каменной кладки, просто обычная стартовая сетка.
Спасибо за вашу помощь! :)