Frame
A box with a fixed aspect ratio that crops its content to fit. Golden unless told otherwise.
Examples
Frames
1:1
φ
16:9
Portrait
1:φ
Anatomy
.frame | Ratio box on a tinted fill, clipping overflow. |
> * | Any child, usually an <img> or <video>, stretched to cover the box. |
API
| Attribute | Values | Description |
|---|---|---|
data-ratio | goldensquarevideoportrait | golden φ:1 is the default; square is 1:1, video 16:9, portrait 1:φ. |
Accessibility
- The frame is a plain box and adds no semantics. Put
alton the image inside, or wrap it in a<figure>with a caption. - Cropping can cut off what the image is about. Keep important detail near the centre, or describe it in the
alt.