title: CSS : Images scale aspect to fill
body: <p>I have a cover Image in an html page that is wrapped by a div.
  The div size is always width:100% height:33%.
  I want any arbitrary image to scale to fill without be stretched on any screen size and ratio.</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>.headerImageWrapper{
    position: relative;
    width: 100%;
    height: 33%;
    overflow:hidden;
  }
  
  .coverImageCentered{
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;   
    margin: auto;
  }
  </code></pre>
  
  <p>My problem is that the image size is not the mimimum possible that satisfy these conditions.</p>
  
  <p><a href="https://www.dropbox.com/s/9mgmb8upb6jqpyn/stack.jpg" rel="nofollow">See the image to understand better</a></p>
  
  <p>I'm an iOS  developer, if you now how it works basically like the contentMode : scale aspect to fill</p>