Та же высота в Сове Карусель, но другая ширина для IMG - PullRequest
Новая
       10

Та же высота в Сове Карусель, но другая ширина для IMG

0 голосов
/ 07 ноября 2018

Я хочу сделать отзывчивую галерею с совой Карусель с горизонтальными и вертикальными изображениями. Что касается визуальных элементов, я хочу, чтобы все они имели одинаковую высоту, хотя они будут иметь разную ширину, и я не хочу обрезать изображения.

Не похоже это:

И это будет идеальный результат:

Я думаю, что решение состоит в том, чтобы установить другую ширину вертикальных изображений в javascript, но я не знаю, как это сделать.

Это мой код: 

//OWLCAROUSEL
	$('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
		autoPlay: 300,
		stopOnHover : true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:2,
            nav:false
        },
        1000:{
            items:3,
            nav:true,
            loop:true,
        }
    }
	})
<div class="photoseries-content">
          <div class="owl-carousel">
            <div> <img src="../img/photoseries/iran/iran-1.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-2.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-3.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-4.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-5.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-6.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-7.jpg" alt="Iran"> </div>
            <div> <img src="../img/photoseries/iran/iran-8.jpg" alt="Iran"> </div>
          </div>
        </div>

Большое спасибо!

...