Heads up: this browser does not support the typed attr() form,
so the images below fall back to their natural size instead of snapping to
the baseline grid. Open this page in a current Chromium-based browser to
see the effect.
Aligning images to a baseline grid
Each image reads the width of its container, then derives its height
from its own aspect ratio, pulled straight from the image's size
attributes by the advanced attr() function that can hand
back real numbers and lengths rather than plain text. That height is
rounded up to the nearest multiple of the line height, so the bottom
edge always lands on a grid line, and it all happens directly in CSS
with no JavaScript.
Because the container width is measured with a container query rather than fixed in advance, the math re-runs as the layout changes, so the height keeps snapping to the grid at every screen size, with the slight overshoot absorbed by cropping the image.
That crop is worth keeping in mind. Since the extra height is hidden by filling the frame and trimming the edges, this only suits images that can afford to lose a sliver of their content, like photographs or decorative art. It is a poor fit for diagrams, logos, or anything where every pixel needs to stay visible.
Drag the sliders to change the font size, line height and number of baseline divisions. Every measure on this surface is derived from those three values, so the whole rhythm, and the images with it, rescales and re-snaps to the grid as you go.
The "Show grid" toggle paints a grid of lines in the background to make it easier to see how everything snaps into place. The bolder lines mark a full line of text; the fainter ones mark the baseline step, a third of a line.
Resizing the window also demonstrates how the images stay locked to the grid at every screen size, thanks to the container query that triggers the math to re-run whenever the container width changes.
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.