Layout

Frame

The .frame layout displays media at a specified aspect ratio. It uses object-fit: cover, which may crop the media's edges.

Use .frame for gallery items, thumbnails, and card media with different source dimensions.

Usage

• Add class="frame" to a wrapper such as <figure> or <div>.
• Add an <img> or <video> as a direct child of the wrapper.
• Optionally, set these custom properties:
  • --n sets the aspect-ratio numerator. The default is .
  • --d sets the aspect-ratio denominator. The default is .

Default 16:9 frame

1:1 ratio

4:5 ratio

3:2 ratio