title: Owl carousel 2 images with 16:9 aspect ratio (responsive)
body: <p>I am using owl carousel 2 and my problem is that I am looking for a solution to maintain images' aspect ratio while users resizing the browser window (responsiveness) based on the graphist's design.</p>
  <p><a href="https://i.stack.imgur.com/DaL8c.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DaL8c.jpg" alt="this is our design" /></a></p>
  <p>which makes the developing harder, each item is a carousel includes 3 pictures,<br />
  I use this function in Scss to make my images 16:9 :</p>
  <pre><code>@function aspect($width) {
      @return $width * 9 / 16;
  }
  </code></pre>
  <p>which is not very interactive and always returns the static size of the image (though I've written media queries in different scales, still it's not very stable)</p>
  <p>here is my carousel init code:</p>
  <pre><code> $('.owl-carousel').owlCarousel({
          nav: false,
          dots: true,
          items: 1,
          center: true,
          //autoWidth: true,
          loop: true,
      });
  </code></pre>
  <p>and my HTML code is :</p>
  <pre><code>&lt;div class=&quot;col-lg-2 col-md-3 col-sm-4 col-xs-12&quot;&gt;
          &lt;a href=&quot;@Url.Action(&quot;Video&quot;, &quot;Service&quot;)&quot;&gt;
              &lt;div class=&quot;owl-carousel owl-theme&quot;&gt;
                  &lt;div class=&quot;item&quot;&gt;
                      &lt;img src=&quot;@service.serviceThumbpath&quot; alt=&quot;@service.serviceName&quot; title=&quot;@service.serviceName&quot; /&gt;
                  &lt;/div&gt;
                  @foreach (var thumb in videoThumbpath)
                  {
                      &lt;div class=&quot;item&quot;&gt;
                          &lt;img src=&quot;@thumb&quot; alt=&quot;@serviceName&quot; title=&quot;@serviceName&quot; /&gt;
                      &lt;/div&gt;
  
                  }
              &lt;/div&gt;
              &lt;h5&gt; @service.serviceName&lt;/h5&gt;
              &lt;div class=&quot;details&quot;&gt;
                  @{
                      _serviceRate = float.Parse(service.serviceRate);
                  }
                  &lt;p class=&quot;pull-left&quot;&gt;@service.VideoCount &lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  <p>is there any solution that I can make it responsive images through owl carousel 2?</p>
  <p>thanks a lot</p>