Alternative max-width: 100% for responsive thumbnails

HTML & CSS
1

I am in search for an alternative for the max-width :100%; property for a responsive image gallery. The reason I need an alternative is that the gallery consists of both landscape and portrait photographs. The parent of each photograph is a li with the following properties:


.gallery li {
 width: 33%;
 min-height: 125px;
 margin: 0;
 margin-top: 30px;
 float: left;
 position: relative;	
 text-align: center;
 list-style: none;
}

What the photographs(thumbnails) have in common though is that they all have a height of 125px!

The max-width property does work for landscapes but understandably not for the portraits, since it will take longer before the image edges of the portraits will reach the parents border when making the viewport smaller (zooming). Result everything is messed up.The portrait images will stay at their height of 125px until their edges reaches the border from the parent, while the landscapes height shrinks!

Is this doable in CSS or do I need Javascript?

Thank you in advance!

2

It would be better if you could post a full example. Max-width on what?

3

Hi ralph.m Here is the page i am talking about! You will see that the height of portrait images will be higher then from the landscapes when making the browser window smaller

4

I thought that maybe I could solve this with setting max-height instead of max-width since all thumbnails have the same height. But that isn’t working either. I probably have to look for a javascript sollution :frowning:

5

Have a look at this sitepoint article (and my comments). That’s about as close as you can get in CSS.

6

I would pad the thumbnails to the same size on upload with a background and you could carry on the way you were.

7

Hi Paul :tup: Great as ever. I was sitting with my hands in my hair, but everythings works great now. Thank you so much.