1

Есть 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%;
}

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

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

Фидл

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

$('#photo-gallery').owlCarousel({
  loop: true,
  nav: false,
  dots: false,
  responsive: {
    0: {
      items: 2
    },
    480: {
      items: 3
    },
    768: {
      items: 4
    },
    992: {
      items: 5
    }
  }
});

setEqualHeight($("#photo-gallery .owl-item"));
.yellow,
.green {
  width: 100%;
  height: 50px;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.photo {
  display: block;
  transform: translateZ(0);
}

.photo:hover {
  transform: translateZ(0) scale(1.1);
  transition: .5s all;
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  -o-transition: .5s all;
  -ms-transition: .5s all;
  z-index: 10;
}

.photo:last-child {
  transform-origin: right center;
}

#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%;
}
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div class="yellow"></div>
<section id="photo-gallery" class="owl-carousel">
  <div>
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a>
  </div>
</section>
<div class="green"></div>

7
  • Уточните - центрировать по вертикали или задать одинаковую высоту. А то Вы изначально грузите изображения разного размера, и тут непонятно.
    – UModeL
    17 авг 2018 в 9:58
  • @UModeL в данном случае смысл в том, чтобы убрать образовавшийся зазор белого. при центрировании по вертикали зазоп же все равно сохранится, поэтому высота должна быть единая
    – Вася
    17 авг 2018 в 10:05
  • но если будет одинаковая высота, то пострадают пропорции картинок. Как бы то ни было, надо править родные файлы стилей. Либо пробовать добавить свои правила "прибивая" родные через !important.
    – UModeL
    17 авг 2018 в 12:20
  • @UModeL в общем, первую часть решил и довольно легко - выще обновил такс. остался вопрос с зумированием
    – Вася
    17 авг 2018 в 12:37
  • а блоки green/yellow будут стилизоваться единовременно или динамически?
    – UModeL
    17 авг 2018 в 13:17

1 ответ 1

2

Можете попробывать вариант с отрицательными margin

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

$('#photo-gallery').owlCarousel({
  loop: true,
  nav: false,
  dots: false,
  responsive: {
    0: {
      items: 2
    },
    480: {
      items: 3
    },
    768: {
      items: 4
    },
    992: {
      items: 5
    }
  }
});

setEqualHeight($("#photo-gallery .owl-item"));
.yellow,
.green {
  width: 100%;
  height: 50px;
}

.yellow {
  background-color: yellow;
}

.green {
  margin-top: -20px;
  background-color: green;
}
.carousel {
  margin-top: -20px;
}
.carousel .owl-stage-outer {
  padding: 20px 0;
}

.photo {
  display: block;
  transform: translateZ(0);
}

.photo:hover {
  transform: translateZ(0) scale(1.1);
  transition: .5s all;
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  -o-transition: .5s all;
  -ms-transition: .5s all;
  z-index: 10;
}

.photo:last-child {
  transform-origin: right center;
}

#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%;
}
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<div class="yellow"></div>
<section id="photo-gallery" class="carousel owl-carousel">
  <div>
    <a class="photo"><img src="http://placehold.it/300x190&text=1" alt="photo-1"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=2" alt="photo-2"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x189&text=3" alt="photo-3"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/304x189&text=4" alt="photo-4"></a>
  </div>
  <div>
    <a class="photo"><img src="http://placehold.it/305x190&text=5" alt="photo-5"></a>
  </div>
</section>
<div class="green"></div>

3
  • отлично! а микрозазоры по бокам - это из-за минимальной разницы в размерах картинок - так?
    – Вася
    20 авг 2018 в 10:01
  • @Вася, почему появляются отступы не скажу. Но, если убрать translateZ(0), то после scale блок выравнивается и их нет.
    – E_K
    20 авг 2018 в 10:35
  • не совсем вас понял. Вот фидл jsfiddle.net/qdajnpw8/89 если мы уберем translateZ(0) то ничего же не изменится - микрозазоры сохранятся, а сам translateZ применяется для того, чтобы картинка при увеличении не подъезжала под размер блока на ховере
    – Вася
    20 авг 2018 в 11:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.