title: Keeping aspect ratio of image but cropping when hitting max/min height
body: <p>I'm trying to make this image responsive that it will resize and keep it aspect ratio at all sizes. However above 650px, its height won't increase but will just crop the top and bottom to keep the ratio and not stretch. Also I want the image height won't go below 200px and just the left and right. I want image to always be center too. Here is what I have so far: <a href="https://jsfiddle.net/4q83mh41/" rel="nofollow">https://jsfiddle.net/4q83mh41/</a></p>
  
  <pre><code>&lt;div class="hero"&gt;
  &lt;img src="http://wpdevserver.x10host.com/wp-content/themes/wp/img/hero1.jpg"&gt;
  &lt;/div&gt;
  
  
  .hero {
      width: 100%;
      min-height:200px;
      max-height: 650px;
      position: relative;
  }
  .hero img {
      width: 100%;
      height:auto;
      min-height:200px;
      overflow: hidden;
      max-height: 650px;
      position:aboslute;
  }
  </code></pre>
  
  <p>Many thanks</p>