Skip to content

frame.md

Latest commit

 

History

History
96 lines (61 loc) · 3.77 KB

frame.md

File metadata and controls

96 lines (61 loc) · 3.77 KB
Raw
raw true
title Frame
description Holds one child in a fixed aspect ratio, cropping an image, video or embedded document to fill it and centering anything else.
nav_group Boxes and Stacks
nav_order 3

Frame

Holds one child in a fixed aspect ratio, cropping an image, video or embedded document to fill it and centering anything else.

Example

<iframe title="Frame, live" srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/yeti.css"><script type="module" src="/yeti/yeti.js"></script><script>addEventListener("click",function(e){var a=e.target.closest&&e.target.closest('a[href="#"]');if(a)e.preventDefault();});</script><body style="margin:0;padding:var(--yeti-space-md)"><div class="frame" data-ratio="16/9"> <img src="photo.jpg" alt="A lake at dawn, cropped to sixteen by nine"> </div>"></iframe>
View Code 
<div class="frame" data-ratio="16/9">
	<img src="photo.jpg" alt="A lake at dawn, cropped to sixteen by nine">
</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, video, picture, iframe, embed or object 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.

A frame that wants an edge, a map's neatline, a photo on a light page, takes data-border, which draws the border width in the border color around any element. For a different color set --yeti-color-border on the frame itself.

<div class="frame" data-ratio="4/3" data-border style="--yeti-color-border: var(--yeti-color-text)">
	<img src="map.png" alt="The route from the car park to the summit">
</div>

A toned plate is a filter on the frame's media, the page's own art direction:

<div class="frame" data-ratio="4/3">
	<img src="map.png" alt="The route from the car park to the summit" style="filter: grayscale(1)">
</div>

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

Attribute Type Values Default Description
data-ratio enum 1/1, 4/3, 3/2, 16/9, 21/9 16/9 Width to height.

Children

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

Tokens

No public tokens.

Internal tokens (may change between minor versions)
  • --_yeti-aspect

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. An iframe needs a title saying what is in it, whatever shape it is cropped to.

Browser support

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

JavaScript

None. This component is CSS only.

Available since 7.0.0.