Scale Image to Full Width and Zoom
<p>I have an image that I am using to fill the full width of the browser, but restrained to a certain height. It's working BUT if the user makes their browser window bigger than a certain point it gives white space on the side. How do I tell it to then zoom the image effectively to still take up the full width when scaled?</p>

<p>Here is my code:</p>

<pre><code>&lt;div class="category-image"&gt;
  &lt;img src="http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg"&gt;&lt;/img&gt;
&lt;/div&gt;

.category-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

p.category-image, .category-description {
    margin-bottom: 35px;
    position: relative;
    height: 450px;
}
</code></pre>

<p>Codepen: <a href="http://codepen.io/anon/pen/grRGBe" rel="nofollow">http://codepen.io/anon/pen/grRGBe</a></p>

<p>I tried adding in: min-width: 200%; but it just stretches the image (not zooms). </p>