Image grid gallery: fluid images same height but different widths

[jaybee]

I’ve been trying to figure out how to create a grid / image gallery whereby every row or image in a row is the same height but has different widths? The whole grid or the box images need to be fluid and responsive. Pretty much every solution i’ve found is where an image grid is made up of images which are all equal squares which is not what i’m looking for.

This link to an image better illustrates what i mean-

http://development.revolutionworx.com/image/1.png

Is this even possible to achieve? i’ve tried masonry, bootstrap and what must be a few dozen different attempts using html and css. I cannot for the life of me get the images to resize equally together. Any pointers or suggestions would be hugely appreciated.

[Paulie_D]

CSS can’t do that.

Masonry.js should be the answer…or something like it.

[jaybee]

Thanks, i thought perhaps i was trying to achieve the impossible. However this site seems to have images side by side which respond and resize together using just css-
http://www.esquire.co.uk

I have tried masonry but all of the images despite being given same heights, are not the same height. It’s driving me nuts!

[Author]

Posts