title: Centered owl-carousel where each image has the same hight and keeps its aspect ratio
body: <p>Is there an approach to to create a centered <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">owl-carousel</a> where each image has the same height without losing its aspect ratio?</p>
  <p>I tried to calculate the image sizes with JS/jQuery, but then the calculation of the <code>owl-carousel</code> gets messed up. Same result with CSS s. example (<a href="https://jsfiddle.net/wittich/we20vhtz/" rel="nofollow noreferrer">JSFiddle</a>):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('.loop').owlCarousel({
          center: true,
          items: 3,
          loop: true,
          margin: 20
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.owl-carousel .owl-stage {
    height: 150px;
  }
  
  .owl-carousel .owl-item {
    height: 100%;
  }
  
  .owl-carousel .owl-item .item {
    height: 100%;
  }
  
  .owl-carousel .owl-item img {
    height: 100% !important;
    width: auto !important;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"&gt;
  &lt;script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"&gt;&lt;/script&gt;
  &lt;div class="loop owl-carousel owl-theme"&gt;
      &lt;div class="item"&gt;&lt;img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The current <code>div</code>/<code>image</code> should be</p>
  <ul>
  <li>in the center of the carousel,</li>
  <li>has the same height like all other items</li>
  <li>keeps it aspect ratio and</li>
  <li>is side by side to the previous or next item.</li>
  </ul>
  <p><em>If the element is bigger wider then the viewport, well than it gets cut.</em></p>
  <p>Is there even a method to achieve that with the <a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">owl-carousel</a>?</p>
  <hr />
  <p>I checked some other similar questions on SO but as far I can see they have all different focus:</p>
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/21574698/">Image slider: maintaining equal height for all images while keeping slider responsive</a></p>
   <pre class="lang-js prettyprint-override"><code> // overrides the aspect ratio
  </code></pre>
  </li>
  <li><p><a href="https://stackoverflow.com/questions/39320305/">Owl Carousel align each item vertically when their height not equal</a></p>
   <pre class="lang-js prettyprint-override"><code> // not the same height of each item*
  </code></pre>
  </li>
  </ul>
  <hr />
  <p>I just double checked the <a href="https://owlcarousel2.github.io/OwlCarousel2/demos/autoheight.html" rel="nofollow noreferrer">auto-height demo</a>...</p>
  <blockquote>
  <p>To enable use <code>autoHeight: true</code>. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to highest item.</p>
  </blockquote>
  <p>Seems like there is not such an options yet.</p>