title: Show only parts of an image without making it a background-image?
body: <p>I have an image as such:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;img src="image.jpg"&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>I want the image to cover the width and height of the container div - right now the image is large and overflows the height of the container. However, I cannot convert it to be a background image.</p>
  
  <p>I have tried:</p>
  
  <pre><code>#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  }
  </code></pre>
  
  <p>but the image still exceeds the height.</p>
  
  <p>Does anyone know of a way to achieve the same effect of filling the div with the image, as you would by using <code>background-image</code> and <code>overflow:none</code>?</p>