Colin Brazier
asked on
A responsive image gallery using flexbox
Ok, my page: http://www.col-b.uk/SLSO/?page=gallery
My requirements: A responsive image gallery using flexbox with assorted size and shaped photos. Nice-to-have: loaded dynamically.
My problem: trying to understand how srcset and flex fit together. For srcset, do I have to know in advance the sizes of the photos in each place? This would be hard if they are to be loaded dynamically; if not dynamic, I will have to hard-code a lot of widths in the html. I have separate folders of low, medium and high-res photos.
What is the best practice in this scenario?
Cheers,
Col
My requirements: A responsive image gallery using flexbox with assorted size and shaped photos. Nice-to-have: loaded dynamically.
My problem: trying to understand how srcset and flex fit together. For srcset, do I have to know in advance the sizes of the photos in each place? This would be hard if they are to be loaded dynamically; if not dynamic, I will have to hard-code a lot of widths in the html. I have separate folders of low, medium and high-res photos.
What is the best practice in this scenario?
Cheers,
Col
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Have you looked at putting your images in a Bootstrap type responsive grid?
ASKER
No, I need to familiarise myself with Bootstrap.
That appears to be what the plugins seem to use...I'm leaning towards a plugin now!
That appears to be what the plugins seem to use...I'm leaning towards a plugin now!
ASKER
Thanks Julian.
You are welcome.
ASKER
Rationale for flex is to avoid messy floats and tons of media queries by using flex flow.
Yes there are masses of plugins available, too many! So I thought I'd code my own as it seemed fairly straightforward. Any you can recommend Julian?
Cheers.