0

I have coded a horizontal scrolling photo gallery wherein the images scale based on the viewport size. I am using an inline list for the images in combination with an img{max-height: 68%}. This works great in Safari and fails in Chrome and Firefox. I've kicked around and tried a number of things (mostly creating divs around the images with CSS size attributes), however nothing has worked as a fix.

Here is my HTML:

    <div class="images">
        <ul>
            <li><img src="images/01_P1030278_web.jpg"/></li>
        </ul>
    </div>

And here is the CSS:

.images{position:relative; float:left; margin:8em 0 0 14.5em; z-index:-100;}

ul{overflow:-moz-scrollbars-none; white-space:nowrap; line-height:0; font-size: 0;}

ul li{display:inline; padding:20px;}

ul li img{max-height:68%;}

In Chrome and Firefox the images appear full-sized regardless of viewport size and therefore flow outside of their containers, completely breaking the design.

Any help will be much appreciated as I am flummoxed!

Thanks in advance....

llyfre
  • 25
  • 1
  • 8

1 Answers1

0

Try this:

.images{position:relative; float:left; margin:8em 0 0 14.5em; z-index:-100;}

ul{overflow:-moz-scrollbars-none; white-space:nowrap; line-height:0; font-size: 0;}

ul li{display:inline; padding:20px;}

ul li img{max-height:68vh;}

Furthermore, if you need to constrain it to one dimension, but have it maintain aspect ratio, you can use:

    ul li img{max-height:68vh; width:auto;}

Hope that helps!

Justin C
  • 326
  • 2
  • 13
  • Wow! Thanks so much --works like a charm. Funny there wasn't a single mention of working with vh instead of % in all the threads I read before posting.... – llyfre Feb 17 '16 at 00:10
  • It is a newer parameter, in that I believe it only works with IE 9 and newer, but you should be able to capture at least 80-85% of browsers right now. In the next year, it should be far more. – Justin C Feb 17 '16 at 19:24