--:--:--Douala, Cameroon

Available for work

Layout

A photograph does not fit a fixed box

Fixed thumbnail dimensions crop half of any real photo set. Ratios solve it with no measuring at all.

5 min read

Real photo sets mix portrait and landscape. A fixed thumbnail slot crops the difference, and it always crops the wrong half: on one gallery the portrait shots had their subject low in the frame, so what survived a landscape crop was sky.

Nudging the crop position is a guess that has to be re-guessed for every new photograph, which means it is not a system.

Justified rows, with no measurement

Give each item a flex-grow equal to its aspect ratio and a basis of zero, and the row divides its width in exactly those proportions. Put the same ratio on the frame and every item resolves to the same height whatever the container width is. Rows fill edge to edge, nothing crops, and resizing is free.

The only decision left is where rows break, which is a greedy partition on the running sum of ratios against a target. One caveat: leave the last row ragged when it is well under target, or a lone portrait resolves to a container-wide frame taller than the viewport.

Pass the real dimensions

Width and height on an image element are a size, not a ratio. Hardcoding one pair for every slide lays a portrait out in a landscape box, and object-fit cannot rescue an image from the wrong box. Generate the real numbers; your image component wants them anyway.