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>

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>

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>