Tile UI Vue
Source code

Components

AspectRatio

A fixed-ratio content container.

Use AspectRatio to keep media or content at a fixed width-to-height ratio.

16:9
import { AspectRatio } from '@tile-ui/vue';
 
export default function AspectRatioDemo() {
	return (
		<div style={{ width: '100%', maxWidth: '32rem' }}>
			<AspectRatio ratio={16 / 9} style={{ background: 'var(--docs-surface-hover)' }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/aspect-ratio

Package usage

import { AspectRatio } from '@tile-ui/vue';
 
<AspectRatio ratio={16 / 9}>
	<img src="https://example.com/poster.png" alt="Poster" />
</AspectRatio>

Highlights

  • Ratio prop
  • Fills its container

Registry dependencies

Item Purpose
aspect-ratio Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

AspectRatio

Prop Type Default
ratio number 1
PreviousAlertDialogNextAttachment