title: CSS image to full width and center vertically?
body: <p>I am having trouble finding a solid answer for this question.  It may have been asked before but I cant find a working solution anywhere.</p>
  
  <p>What I want is to make my image full width 100%, keep aspect ratio and center the image vertically with overflow hidden.</p>
  
  <p>This is what I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="img-container"&gt;
      &lt;img src="myimgurl.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.img-container {
      width: 100%;
      height: 200px;
      max-height: 240px;
      overflow: hidden;
      margin: 0;
      position: relative;
  }
  
  .img-container img {
      position:absolute;
      vertical-align: middle;
      max-width: 100%;
  }
  </code></pre>