AspectRatio

import { AspectRatio } from "@grassroot/ui-react";
 
<AspectRatio ratio={16 / 9}>
  <div className="flex items-center justify-center bg-sunken">media</div>
</AspectRatio>

<script setup lang="ts">
import { AspectRatio } from "@grassroot/ui-vue";
</script>
 
<template>
  <AspectRatio
    :ratio="16 / 9"
  >
    <div className="flex items-center justify-center bg-sunken">media</div>
  </AspectRatio>
</template>

import { Component } from "@angular/core";
import { GrassrootAspectRatio } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootAspectRatio],
  template: `
    <grassroot-aspect-ratio
      [ratio]="16 / 9"
    >
      <div className="flex items-center justify-center bg-sunken">media</div>
    </grassroot-aspect-ratio>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { AspectRatio } from "@grassroot/ui-svelte";
</script>
 
<AspectRatio
  ratio={16 / 9}
>
  <div className="flex items-center justify-center bg-sunken">media</div>
</AspectRatio>

import { AspectRatio } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <AspectRatio
        ratio={16 / 9}
      >
        <div className="flex items-center justify-center bg-sunken">media</div>
      </AspectRatio>
    </>
  );
}