Span image from side to side in browser window - html

Question

In the middle of a webpage I want to display an image that stretches all the way from the left to the right side of the browser window.
When the window is resized the image should scale down proportionally but I need the visible height of the image, let's say 200px, should remain the same as there is a div on the image displaying text. I presume the "image window" is preserved by a containing div with a fixed height.
How do one accomplish this and get it working in the following browsers: ie8+, Chrome20+, FF20?

Answer 1

Just set width and leave the height empty, it will auto scale
img {
width: 100%;
}
As you want a set height you should wrap the image in a div with overflow hidden. It will scale as you want etc.
EDITED
DEMO http://jsfiddle.net/vYdBt/136/
img {
width:100%;
}
div {
width: 100%;
height: 200px;
overflow: hidden;
}
The website in your link uses a background image. This could be done like this
DEMO http://jsfiddle.net/kevinPHPkevin/vYdBt/135/
div {
background: url(http://lionssharedigital.com/wp-content/uploads/2013/04/Lion.jpg);
width: 100%;
height: 300px;
background-position: center center;
background-repeat: no-repeat;
background-size:100% auto;
}
This would center the image vertically too

Answer 2

Ah, the ever popular, "how do I do responsive images?" Well, in your cause it's business as usual other than you set a specified height on the image.
http://jsfiddle.net/aMhbz/1/
HTML
<div id="top"></div>
<div id="image">
<img src="http://lorempixel.com/1200/200/city/" />
</div>
<div id="bottom"></div>
CSS
#top, #bottom {
height: 50px;
}
#image img {
max-width: 100%; /* the responsive part */
height: 200px; /* same height as image */
}
My answer does a little extra targeting based on a image container. You could also do some thing like this:
HTML
<img src="your-image.jpg" />
<div>
<img class="set-height" src="your-image.jpg" />
</div>
CSS
/* for all images to be responsive */
img {
max-width: 100%;
}
/* specific images */
.set-height {
height: 200px; /* the height of your image */
}