Skip to content
VolvoVolvo Cars Web Design System

Media

Edit on GitHub

Display images and video with the `.img` block class, aspect-ratio utilities, and object-fit utilities.

@volvo-cars/css v2.5.1

Prevent layout shift

Section titled “Prevent layout shift”

Include intrinsic width and height attributes, or pair a supported aspect-ratio class with a width, so the browser can reserve space while media loads.

Choose an aspect ratio

Section titled “Choose an aspect ratio”

Select a supported ratio that matches the intended composition and crop the source asset for that ratio. When the composition changes by viewport, use breakpoint-prefixed aspect-ratio classes together with responsive image sources.

Choose an object fit

Section titled “Choose an object fit”

Use object-cover for decorative photography that may be cropped and object-contain when the entire source must remain visible, such as a logo or diagram. Avoid object-fill for photography because it distorts the image.