CODEWITHSUNDEEP
htmlcssimagescroll
shennan
shennan

Reputation: 11656

Responsive, horizontal scrolling of fully-sized images

I'm trying to implement a responsive horizontally scrolled list of images.

For example:

<ul>
  <li>
    <img src="image1.jpg"/>
  </li>
  <li>
    <img src="image2.jpg"/>
  </li>
  <li>
    <img src="image3.jpg"/>
  </li>
</ul>

The images are an unknown width and height ratio.

My Requirements:

  1. I want the images to always be 100% height of the browser window at all times.
  2. I want them to be adjacent to each other (without using float; so inline is probably best).
  3. I don't want to break the width/height ratio of the images on window resize.
  4. No javascript.

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:

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;

}

Any takers?

Edit:

I've put a simple fiddle together for an example of where I'm at with it.

Any help would be great...

Upvotes: 1

Views: 4399

Answers (2)

shennan
shennan

Reputation: 11656

Okay here we go. After much experimentation I've finally found what I believe to be the answer for most browsers. Seems to work on Firefox 3.5+, Safari 4+, Chrome 3+. I've also tested on an iOS device, an Android device, and IE, though not extensively.

*clears throat*

html, body{

  width:100%;
  height:100%;

}

html, body, ul, li{

  padding:0;
  margin:0;
  border:0;

  text-decoration:none;

}

ul{

  width:100%;
  height:100%; /* CHANGE */

  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;

}

ul li{

  display:inline;

  height:100%;

}

ul li img{

  max-height:100%;
  height:100%; /* CHANGE */
  width:auto !important; /* CHANGE */

}

The main factors seem to be making sure that the height properties are 100% all the way down to the last node in the list, including the img (on top of it's max-height declaration).

I've also noticed better success in older browsers appending the !important declaration after the width:auto property.

I'm surprised at the lack of hunger for a layout like this, so if this has helped anybody then please let me know.

Upvotes: 2

Jack
Jack

Reputation: 1941

I see what you mean by the distortion at low widths when using the %. So one solution would be to also implement some fallback absolute widths too, so that at lower resolutions the images don't re-size.

CSS

html, body{

    width:100%;
    height:100%;

}

html, body, ul, li{

    padding:0;
    margin:0;
    border:0;  
    text-decoration:none;

}

ul{
    min-width:150px
    width:100%;
    overflow-y:scroll;
    white-space: nowrap;
    line-height: 0;
    font-size: 0;

}

ul li{

    display:inline;
    height:100%;
}

ul li img{

    min-width:150px
    max-height:100%;
    width:auto;

}

http://jsfiddle.net/MkLd4/

Upvotes: 0

Related Questions