Pictures aligned horizontally adjust in size with window size - html

Question

I made a quick example of images aligned horizontally:
All of the images adjust to the height of the "wrap" div.
http://i.imgur.com/VOA1pBG.png
Yet, when I make the window smaller, images start to come out of the div and go below as such:
http://i.imgur.com/VKUA4Ju.png
I want to make it so as I make the window smaller, the images get smaller. To fit horizontally in the size of the browser.
Here is the code used to make the existing page:
html:
<h1> Thriller </h1>
<div id="week-wrap">
<div id="sunday" class="day"><img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"></div>
<div id="monday" class="day"><img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg"></div>
<div id="tuesday" class="day"><img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"></div>
</div>
CSS:
body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: 300px;}
.day {float: left;}
img {height: 100%;}

Answer 1

Instead of float: left use display: inline-block for the divs. Then, add white-space: nowrap to the container.
http://jsfiddle.net/ExplosionPIlls/uYTxW/

Answer 2

try resizing image div with javascript on resize window:
$(window).bind("resize", function(){ //Adjusts image when browser resized
// do your image size logic here
// $('#week-wrap').width(); // width of div container
});

Answer 3

I would advocate removing the divs around each image. You can style the images directly. Also, instead of setting an explicit height on your wrapper, set overflow: hidden to establish a block formatting context so that it automatically expands to contain your floats.
You wind up with markup like:
<h1> Thriller </h1>
<div id="week-wrap">
<img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg" id="sunday" />
<img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg" id="monday" />
<img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg" id="tuesday" />
</div>
and CSS like:
body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; overflow: hidden; }
#week-wrap > img { width: 33.333%; height: auto; float: left;}
with this result: http://jsfiddle.net/4Aytd/
var imageSizer = function () {
var images = document.querySelectorAll('#week-wrap > img'),
numImages = images.length,
imageWidth = (100/numImages) + '%',
i;
for(i = numImages-1; i >= 0; i--) {
images[i].style.width = imageWidth;
}
};
http://jsfiddle.net/4Aytd/4/