Разрывы сетки начальной загрузки (изображения с разной высотой)

Question

В настоящее время я играю с API Riot Games, я использую начальную загрузку для управления сеткой "Чемпионов", эти изображения загружаются из базы изображений Riot, но некоторые (4-5) на 1px ниже остальных.

Это нарушает сетку, и так как изображения меняют высоту в зависимости от ширины экрана, я не могу установить высоту, чтобы исправить это, я бы предпочел не использовать JS или jQuery для вычисления высоты для каждого изображения при каждом изменении ширины, поэтому я ' Интересно, есть ли у кого-нибудь исправление для этого только с помощью классов CSS или начальной загрузки?

Страница http://www.mathias-syversen.net/page/champions.php

<div class="row">
<?php foreach ($champs as $champ) { ?>
    <div id="id-<?php echo $champ[id] ?>" class="champion col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="thumbnail">
            <a href="/page/champion.php?id=<?php echo $champ[id] ?>">
                <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/<?php echo $champ[key] ?>_0.jpg" alt="<?php echo $champ[name] ?>">
                <div class="name-tag"><?php echo $champ[name] ?></div>
            </a>
        </div>
    </div>
<?php } ?>
</div>

Answer 1

Если вы можете применить JQuery, вы можете использовать JQuery плагин соответствия высоты по следующей ссылке

http://brm.io/jquery-match-height/ Демонстрация: http://brm.io/jquery-match-height-demo/

Чтобы она соответствовала высоте, поместите класс like - item на предметы, которые хотите иметь одинаковую высоту. С помощью следующего примера кода после включения библиотеки по ссылке выше

$(function() {
    $('.sameHeight .item').matchHeight();
 })

Надеюсь это поможет

Answer 2

Вам необходимо использовать изображения одинаковой высоты или определить одинаковую высоту для всех изображений.

Размер 6-го изображения - 307*557, остальные - разных размеров.

<div class="thumbnail fix_block"> 
    <a href="/page/champion.php?id=78"> 
        <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Poppy_0.jpg" alt="Poppy">
        <div class="name-tag">Poppy</div>
    </a>
</div>

/ * и в таблицу стилей */

.fix_block{height:350px}

или вам нужно поместить фиксированное число div с class = "col-*" в один div с class="row"