@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>. Не подскажите как?

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


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

  • Вопрос задан
  • 280 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
Используй флекс, тем самым у тебя будет одинаковая высота и адаптивно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы