title: Owl Carousel 2 Responsive image
body: <p>There are some topics in this case, but after tried all way, no success. I am trying to make image responsive in owl carousel 2 plugin, I used <code>responsive</code> option in plugin option and I have control on number of item on desire resolution but in some resolution image not fit to parent height, the parent is <code>view-ad-image</code> and it has 250px height, and I want to to all resolution, images fit to this height.</p>
  
  <p><strong>What I tried so far:</strong></p>
  
  <pre><code>.owl-carousel .owl-item img {
      display: block;
      height: 250px;
      min-width: 100%;
  }
  </code></pre>
  
  <p><em>Result: images are stretched on some resolution, so not successfull.</em></p>
  
  <pre><code>.owl-carousel .owl-item img {
    display: block;
    height: 100%;
    width: 100%;
  }
  </code></pre>
  
  <p><em>Result: Also not working. still image height not fit with parent.</em></p>
  
  <p>I provide an example on jsfiddle because you can change window width (resolution) in there, but you can't here on StackOverflow snippet. so please for test, change result frame width to see the result. </p>
  
  <p><strong>Goal:</strong></p>
  
  <p>Fit all images to parent height, and you should not see red background, if you see, it means it not responsive and not fit.</p>
  
  <p><strong><a href="https://jsfiddle.net/uamp6bwy/" rel="nofollow noreferrer">JSFiddle</a></strong></p>