img {max-height:%} fails in chrome

Question

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....

Answer 1

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!