Frame

Fits the image into a certain angle of view.

Usage


<div data-unitone-layout="frame">
	<img src="https://placehold.jp/1000x1000.jpg" alt="" style="width: 100%" />
</div>

Aspect ratio.


<div data-unitone-layout="frame" style="--unitone--ratio: 4/3">
	<img src="https://placehold.jp/1000x1000.jpg" alt="" style="width: 100%" />
</div>


import { Frame } from '@inc2734/unitone-css';
 
<Frame ratio="4/3">
	<img src="https://placehold.jp/1000x1000.jpg" alt="" />
</Frame>

Switch aspect ratio when portrait and mobile width.


<div data-unitone-layout="frame -switch">
	<img src="https://placehold.jp/1000x1000.jpg" alt="" style="width: 100%" />
</div>


import { Frame } from '@inc2734/unitone-css';
 
<Frame switchRatio>
	<img src="https://placehold.jp/1000x1000.jpg" alt="" />
</Frame>