Images and media

Every <img> is display: block, max-inline-size: 100% and block-size: auto — it never overflows its container and keeps its ratio when a width is set. Always give it alt, and width / height attributes to reserve space; add loading="lazy" below the fold.

This image can't break out of its container.

Cropping to a ratio

Put a .ratio-* class (ratio-1x1, ratio-4x3, ratio-16x9, ratio-21x9) on an <img>, or on a box wrapping one, and it's cropped to fill that ratio.

The last one is the anchor-wrapped pattern from the code sample above — the ratio class goes on the <a>, not the <img>, when the image is a link.

Object fit

.object-cover and .object-contain set object-fit on an image that has been given a size (a width and height, an aspect-ratio, or a fixed box). .object-cover crops to fill; .object-contain letterboxes so the whole image shows.

A .ratio-* class already applies object-fit: cover — add .object-contain alongside it to letterbox within that ratio instead.

Figures

Use <figure> / <figcaption> for an image with a caption. Inside a callout or themed section the caption re-tints to that surface.

Floating images

Add a .align-* class to an <img> in running text; margins for the gap are added automatically, and the containing block clears the float itself (no .clearfix). Below sm every image goes full-width and centred.

align-start. Despite their name, jellyfish aren't fish — they're invertebrates that drift with the current, pulsing their bell to move. Text flows around the floated image, and the paragraph contains the float so the next block starts cleanly below it. Nunc ac dolor quis odio egestas accumsan ac eu nibh. Nullam at dui at elit egestas posuere. Aenean aliquam metus at efficitur blandit.

Responsive embeds

Wrap an <iframe> in .embed-container for a fluid 16:9 frame. Add a .ratio-* class for another ratio — those classes work on any element, not just embeds.