Frame

Constrains media to a chosen aspect ratio. Overflow is cropped so images and videos fit cleanly within the frame.

Usage


<div data-unitone-layout="frame">
	<img src="..." alt="" style="width: 100%" />
</div>

Props

HTML --unitone--ratio / JSX ratio={value}

Aspect ratio.


<div data-unitone-layout="frame" style="--unitone--ratio: 4/3">
	<img src="..." alt="" style="width: 100%" />
</div>


import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<Frame ratio="4/3">
	<img src="..." alt="" />
</Frame>

HTML -switch / JSX switchRatio

Switch aspect ratio when portrait and mobile width.


<div data-unitone-layout="frame -switch">
	<img src="..." alt="" style="width: 100%" />
</div>


import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<Frame switchRatio>
	<img src="..." alt="" />
</Frame>

Pair responsiveContext="container" with containerType="inline-size" on an ancestor to make the responsive behavior depend on the container width. Both props must be set on the same ancestor for its context to become active. If containerType="inline-size" is omitted there, responsiveContext="container" is ignored and the existing responsive context remains active. See Responsive context utilities for examples.


<div data-unitone-layout="decorator -container-type:inline-size -responsive-context:container" style="--unitone--max-width: 375px">
	<div data-unitone-layout="frame -switch">
		<img src="..." alt="" style="width: 100%" />
	</div>
</div>


import { Decorator } from '@inc2734/unitone-css/layout-primitives/decorator/react';
import { Frame } from '@inc2734/unitone-css/layout-primitives/frame/react';
 
<Decorator maxWidth="375px" containerType="inline-size" responsiveContext="container">
	<Frame switchRatio>
		<img src="..." alt="" />
	</Frame>
</Decorator>

HTML @container / JSX queryContext=“container”

queryContext="container" selects container queries for this Frame’s responsive behavior. An eligible ancestor query container is required; otherwise, the responsive change is not applied. It does not change fluid values or establish a responsive context for descendants.