Frame

Holds one child in a fixed aspect ratio, cropping media to fill it and centering anything else.

Example

<div class="frame" data-ratio="4/3">
    <img src="photo.jpg" alt="A lake at dawn, cropped to four by three">
</div>

When to use it

Use a frame wherever images of unpredictable shape must present as the same shape: card thumbnails, avatars, a video embed that should not reflow the page while it loads. The frame owns the shape; the media fills it.

How it works

aspect-ratio sizes the frame from its width, and overflow: hidden clips. An image or video child is stretched to both dimensions with object-fit: cover, so it fills without distortion and loses only the overflow. Any other child, a placeholder or an icon, is centered with flexbox.

Why this name

It is what a picture frame does: fix the shape and crop what is inside it. Foundation 6 had .responsive-embed for video ratios only; a frame does the same for anything.

Attributes

Children

• > *: exactly 1. One child: an image, video or picture is cropped to fill; anything else is centered.

Tokens

No public tokens.

Accessibility

• Cropping hides parts of an image. Make sure the alt text describes what is visible, or use data-ratio to match the image so nothing is lost.

Browser support

• Used without guards: aspect-ratio, object-fit
• Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.