CODEWITHSUNDEEP
cssimagewidthhorizontal-scrolling
user1307028
user1307028

Reputation: 69

100% width images on horizontal scrolling page

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.sstatic.net/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>

Upvotes: 5

Views: 7523

Answers (2)

ThinkingStiff
ThinkingStiff

Reputation: 65341

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;
}

Upvotes: 4

jacktheripper
jacktheripper

Reputation: 14219

You can use the following CSS:

html, body {
    width: 100%;
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#image1 {
    background-image: url('image1');
}
#image2 {
    left: 100%;
    background-image: url('image2');
}
#image3 {
    left: 200%;
    background-image: url('image3');
}
#image4 {
    left: 300%;
    background-image: url('image4');
}​

using background images with 100% width and 100% height.

You can see a live example of it working here

Upvotes: 1

Related Questions