@X30N

Owl carousel как пропорционально уменьшать изображения?

Имеется слайдер на OWL, в Opencart. 3 изображения в ряд на всю ширину страницы. OWL уменьшает их по ширине, но всегда сохраняет высоту. Можно ли как то заставить OWL сохранять оригинальные пропорции изображения и не урезать его? Нужно что бы они всегда были квадратные.

JS
spoiler
$('#carousel77').owlCarousel({
        items : 3,
        itemsCustom : false,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [980,3],
        itemsTablet: [768,2],
        itemsTabletSmall: false,
        itemsMobile : [479,1],
        singleItem : false,
        itemsScaleUp : false,
        slideBy: 1,


        //Basic Speeds
        slideSpeed : 200,
        paginationSpeed : 800,
        rewindSpeed : 1000,

        //Autoplay
        autoPlay : true,
        stopOnHover : false,

        // Navigation
        navigation : true,
        rewindNav : true,
        scrollPerPage : false,

        //Pagination
        pagination : false,
        // Responsive 
        
        responsive: true,
        responsiveRefreshRate : 200,
        responsiveBaseWidth: window,
        center:true
      });

Скрины
spoiler
Надо так
5c25d4d820d83073223257.png

Сейчас так
5c25d51a7f9f3652427184.jpeg
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Lord_Dantes
Full stack Developer
Можете использовать свойтсва CSS для изображения.
object-fit: cover(это будет работать как background-size: cover;) или же contain(как background-size: contain;).
Вообще нужно смотреть возможно в вашем случае просто нужно поставить width:100%, height: 100%.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы