Equal height with auto width collage

Question

I am try to make something like the following image.

The image size can be any size but max height should be 68px

I have tried table-cell but i am not able to break the row.

I have also use column-count but not get sucess is it possible with css ?

Need help Thanks

Matthias Wissink · Accepted Answer · 2016-11-21T15:37:05.387

1

Flexbox is perfect for this, just add this css to the parent of the pictures:

display: flex;
flex-direction: row;
flex-wrap: wrap;

You can set the flex-grow of the children to 1 to stretch them over the whole parent. See the example I made for you:
https://jsfiddle.net/u4cxqab1/

Here is some more documentation about flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Nov 21 '16 at 15:37

answered Nov 21 '16 at 15:34

Matthias Wissink

116
4

will you please set this layout ? http://jsfiddle.net/Pa7mU/68/ actually i am not familiar with flexbox – Ismail Farooq Nov 21 '16 at 15:36
yes exactly but image getting stretch can we fix it ? – Ismail Farooq Nov 21 '16 at 15:45
You can add `object-fit: cover` to the img to remove stretching. – Matthias Wissink Nov 21 '16 at 15:46
object-fit: cover has browser compatibility issue http://caniuse.com/#search=object-fit – Ismail Farooq Nov 21 '16 at 15:48
dude i have another question what should i do if i need 10 image in single row ? – Ismail Farooq Nov 21 '16 at 15:51
Yeah well, that's IE :) But maybe this guy answers your question with Polyfill: http://stackoverflow.com/a/29103071/6490884 – Matthias Wissink Nov 21 '16 at 15:54
and what should i need to do for 10 images in single row like image in question ? – Ismail Farooq Nov 21 '16 at 15:56
I would say, make your parent bigger, but since it is in % it will change when resizing the window, so that will screw up the row of 10. – Matthias Wissink Nov 21 '16 at 16:30

Equal height with auto width collage

1 Answers1