title: Pictures aligned horizontally adjust in size with window size
body: <p>I made a quick example of images aligned horizontally:</p>
  
  <p>All of the images adjust to the height of the "wrap" div.
  <a href="http://i.imgur.com/VOA1pBG.png" rel="nofollow">http://i.imgur.com/VOA1pBG.png</a></p>
  
  <p>Yet, when I make the window smaller, images start to come out of the div and go below as such:
  <a href="http://i.imgur.com/VKUA4Ju.png" rel="nofollow">http://i.imgur.com/VKUA4Ju.png</a></p>
  
  <p>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:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;h1&gt; Thriller &lt;/h1&gt;
  
      &lt;div id="week-wrap"&gt;
      &lt;div id="sunday" class="day"&gt;&lt;img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"&gt;&lt;/div&gt;
      &lt;div id="monday" class="day"&gt;&lt;img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg"&gt;&lt;/div&gt;
      &lt;div id="tuesday" class="day"&gt;&lt;img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{margin: 0 auto;}
  #week-wrap {border: 1px solid #000; height: 300px;}
  .day {float: left;}
  img {height: 100%;}
  </code></pre>