title: Responsive, horizontal scrolling of fully-sized images
body: <p>I'm trying to implement a responsive horizontally scrolled list of images.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;img src="image1.jpg"/&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="image2.jpg"/&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;img src="image3.jpg"/&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The images are an unknown width and height ratio.</p>
  
  <p><strong>My Requirements</strong>:</p>
  
  <ol>
  <li>I want the images to always be 100% height of the browser window at all times.</li>
  <li>I want them to be adjacent to each other (without using <code>float</code>; so <code>inline</code> is probably best).</li>
  <li>I don't want to break the width/height ratio of the images on window resize.</li>
  <li>No javascript.</li>
  </ol>
  
  <p>So far I've tried with this CSS, but I can't seem to get the images not to squash when the browser window is resized:</p>
  
  <pre><code>ul{
  
    width:100%;
    overflow-y:scroll;
    white-space: nowrap;
    line-height: 0;
    font-size: 0;
  
  }
  
  ul li{
  
    display:inline;
  
    height:100%;
  
  }
  
  ul li img{
  
    max-height:100%;
    width:auto;
  
  }
  </code></pre>
  
  <p>Any takers?</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>I've put a simple <a href="http://jsfiddle.net/7vZ4p/" rel="nofollow">fiddle</a> together for an example of where I'm at with it.</p>
  
  <p>Any help would be great...</p>