100% width images on horizontal scrolling page

css, horizontal-scrolling, image, width

Solution

HTML will do the scrolling and the image width for you if you let it.

Demo: http://jsfiddle.net/ThinkingStiff/sVa7S/

HTML:

<div id="scroll">
       <img src="http://thinkingstiff.com/images/priorities.png" /><!--
    --><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS:

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top;
}

Problem

I'm trying to make a page for a photo story - it's meant to scroll horizontally, but I also want images to scale to 100% height and auto width (so no cropping). The horizontal scroll and 100% height/auto width is no problem. But I can't get the images spaced properly - they keep overlapping. See: https://i.stack.imgur.com/iAIXT.jpg Is this possible? Have been working at this for ages and am running out of ideas. Thanks! JS: ``` <script type="text/javascript" charset="utf-8"> $(function(){ $(".image").wrap("<td>"); }); </script> ``` CSS: ``` .image { position:absolute; width:auto; height:100%; } ``` HTML: ``` <div id="page-wrap"> <div class="image"> <img src="images/Betty-001.jpg" id="image-contents" /> </div> <div class="image" style="margin-left:75%;"> <img src="images/Betty-001.jpg" id="image-contents" /> </div> </div> ```

Original source