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:
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!
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
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