Frame | Brio

Aspect-ratio container. Images, video, and anything else that should maintain a fixed ratio regardless of content. Default is 16:9. Children are centered by default.

Examples

16:9

1:1

<div class="cluster">
    <div class="frame box is-bordered" style="--frame-ratio: 16/9; inline-size: 24rem">
        <span>16:9</span>
    </div>
    <div class="frame box is-bordered" style="--frame-ratio: 1; inline-size: 12rem">
        <span>1:1</span>
    </div>
</div>

Reference

Applies to

.frame

Slots

Slot	Description
`.frame > img, .frame > video`	Image and video elements inside a frame are set to fill the frame by default.

Tokens

Token	Default	Description
`--frame-ratio`	`16 / 9`	Aspect ratio for the frame
`--frame-align`	`center`	Vertical alignment of frame content
`--frame-justify`	`center`	Horizontal alignment of frame content