Как картинки в фотокарусели уравнять по высоте?

Question

[ligisayan]

Всем привет! Есть owl карусель с картинками, которые могут слегка различаться размерами.

Как сделать так, чтобы картинки отображались одиноковой высоты (без белых отступов), причем при зумировании не прятались под основание карусели, а налазили на блоки сверху и снизу (обозначил для наглядности зеленым и желтым)?

UPD 1: Первую часть с одинаковой высотой решил при помощи фиксации одинаковой высоты у блоков:

function setEqualHeight(columns){
    var tallestcolumn = 0;
    columns.each(function(){
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
            tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}

setEqualHeight($("#photo-gallery .owl-item"));

и выравнивание по высоте стилей контента:

#photo-gallery.owl-carousel .owl-item>div, #photo-gallery.owl-carousel .owl-item>div>a.photo, #photo-gallery.owl-carousel .owl-item img {
    height: 100%;
}

Читал, что можно еще как-то динамически при ресайзе вычислять высоту коллбеков при помощи <i>onRefresh: function () {}, onRefreshed: function () {}</i>. Не подскажите как?

Ну и остается еще вопрос с зумированием  и зазорчиками с левой-правой стороеы от блоков.

Важно сохранить адаптивность, именно поэтому выставляются настройки карусели!

Comments

[Антон]

Дать фиксированную высоту слайдам, повесить overflow: hidden

[ligisayan]

Антон, нее, слайды дожны быть адаптивными, а overflow: hidden не даст возможности зумирования о котором пищу

Answer 1

[profesor08]

Используй флекс, тем самым у тебя будет одинаковая высота и адаптивно.

Comments

[ligisayan]

profesor08 карусель на флексах организована - можете сами проверить в фидле, но не все так просто и однозначно

[profesor08]

ligisayan, я там display: flex не вижу, везде display: block

[ligisayan]

profesor08, вот здесь flex - https://jsfiddle.net/qdajnpw8/73/
Картинки в итоге растянулись и белые зазоры по бокам и сверху-снизу не исчезли

[profesor08]

body { margin: 0 } - убрать зазоры
позиционируй картинки по центру их контейнера
задай им z-index
задай контейнерам overflow-y: visible

[ligisayan]

profesor08, сделал все рекомендации - эффекта не заметил