How to proportionally reduce carousel elements at low resolutions?

Question

JavaScript

Hello! There is an owl-caruosel carousel with 1 center element. If everything looks good at high resolutions, then for some reason it’s terrible at small resolutions - the pictures are initially large and do not decrease proportionally, even though the carousel itself is adaptive and the responsive property is specified in the carousel settings. Question: how to reduce the elements proportionally? Fiddle

<section class="row" id="our-reviews">
  <div id="reviews" class="owl-carousel">
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
    <div class="item">
      <img src="http://placehold.it/707x349">
    </div>
  </div>
</section>

var owl3 = $('#reviews');

owl3.owlCarousel({
  loop: true,
  center: true,
  margin: 196,
  nav: true,
  autoWidth: true,
  navText: ["", ""],
  dots: false,
  responsive: {
    600: {
      items: 1
    },
    768: {
      items: 2
    },
    992: {
      items: 2
    },
    1200: {
      items: 2
    }
  }
});

#reviews .owl-item {
  margin: 30px auto 80px;
}
#reviews .owl-item .item img {
  box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#reviews .owl-item.active.center {
  opacity: 1;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;;
}

Answer 1

try moving the autoWidth from the common sts to only the breakpoints you need, like so:

responsive: {
    0: {
      items: 1 //здесь нельзя autoWidth, т.к. он картинка должна адаптивиться на малых размерах экрана
    },
    992: {
      items: 2,
      autoWidth:true 
    }
  }