Aspect Ratio

Displays content within a desired ratio.

## Installation

npm

npx @galaxy-stack/nebula-cli@latest add aspect-ratio

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add aspect-ratio

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add aspect-ratio

bun

bunx @galaxy-stack/nebula-cli@latest add aspect-ratio

global

# If you have installed galaxy-design globally
galaxy-design add aspect-ratio

Usage

Vue

<script setup lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio'
</script>

<template>
  <AspectRatio :ratio="16 / 9" class="bg-muted">
    <img
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
      alt="Photo by Drew Beamer"
      class="rounded-md object-cover"
    />
  </AspectRatio>
</template>

React

import { AspectRatio } from "@/components/ui/aspect-ratio"

export default function App() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
        alt="Photo by Drew Beamer"
        className="rounded-md object-cover"
      />
    </AspectRatio>
  )
}

Angular

import { Component } from '@angular/core';
import { AspectRatioComponent } from '@/components/ui/aspect-ratio';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AspectRatioComponent],
  template: `
    <ui-aspect-ratio [ratio]="16 / 9" class="bg-muted">
      <img
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd"
        alt="Photo by Drew Beamer"
        class="rounded-md object-cover"
      />
    </ui-aspect-ratio>
  `
})
export class AppComponent {}

API Reference

Props

Prop	Type	Default	Description	Frameworks
ratio	number	1	Desired aspect ratio (e.g., 16/9)	All
asChild	boolean	false	Render as child element	React, Vue, Angular
children	ReactNode	-	Content constrained by the ratio	React, Vue, Angular

Accessibility

Adheres to the img role requirements.

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)