OWL CAROUSEL --- FIT IMG INTO DIV - PROPORTIONAL 16:9 ASPECT RATIO

/*CSS*/   .owl-carousel {

    height: auto;

  }

  .owl-carousel .owl-stage {

    width:534px;

    height:300px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden

  }

  .owl-carousel .owl-stage-outer {

    transform: translate3d(0px, 0px, 0px);

  }

  .owl-carousel .owl-wrapper,

   .owl-carousel .owl-item {

      transform: translate3d(0, 0, 0);

      flex-shrink:1;

      -webkit-flex-shrink: 1;

      max-width:80%;

      max-height:80%;

    }

  .owl-carousel .owl-item img {

    height: 225px;

    width: 400px;

    object-fit: cover !important;

  }

/*JS*/

$(document).ready(function () {

  $('.owl-carousel').owlCarousel({

    loop:true,

    dotsEach: true,

    margin:5,

    responsiveClass:true,

      responsive:{

      0:{

        items:1,

        nav:true,

        dots: false,

        autoWidth:true,

        center: true

      },

      820:{

        items:2,

        nav:false,

        dots: true,

        autoWidth:true,

        center: true

      },

      1000:{

        items:3,

        nav:false,

        dots: true,

        autoWidth:true,

        center: true

      }

    }

  })

});