Skip to content

Aspect Ratio

Displays content within a desired ratio.

<script setup lang="ts">
import { AspectRatio } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <AspectRatio.Root :ratio="16 / 9">
      <AspectRatio.Content>
        <img src="https://cover.sli.dev">
      </AspectRatio.Content>
    </AspectRatio.Root>
  </main>
</template>

import { AspectRatio } from '@destyler-ui/react'

export function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            style={{ objectFit: 'cover', width: '100%', height: '100%' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

import { AspectRatio } from '@destyler-ui/solid/aspect-ratio'

export function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio } from '@destyler-ui/svelte'
</script>

<main style="width: 300px;">
  <AspectRatio.Root ratio={16 / 9}>
    <AspectRatio.Content>
      <img
        src="https://elonehoo.me/gallery/20_sun.jpg"
        alt="Sunset"
        style="width: 100%; height: 100%; object-fit: cover;"
      />
    </AspectRatio.Content>
  </AspectRatio.Root>
</main>

Anatomy

<script setup lang="ts">
import { AspectRatio } from '@destyler-ui/vue'
</script>

<template>
  <AspectRatio.Root>
    <AspectRatio.Content />
  </AspectRatio.Root>
</template>

import { AspectRatio } from '@destyler-ui/react'

export default function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

import { AspectRatio } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio } from '@destyler-ui/svelte'
</script>

<main style="width: 300px;">
  <AspectRatio.Root ratio={16 / 9}>
    <AspectRatio.Content>
      <img
        src="https://elonehoo.me/gallery/20_sun.jpg"
        alt="Sunset"
        style="width: 100%; height: 100%; object-fit: cover;"
      />
    </AspectRatio.Content>
  </AspectRatio.Root>
</main>

Examples

Basic

<script setup lang="ts">
import { AspectRatio } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <AspectRatio.Root :ratio="16 / 9">
      <AspectRatio.Content>
        <img src="https://cover.sli.dev">
      </AspectRatio.Content>
    </AspectRatio.Root>
  </main>
</template>

import { AspectRatio } from '@destyler-ui/react'

export function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            style={{ objectFit: 'cover', width: '100%', height: '100%' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

import { AspectRatio } from '@destyler-ui/solid/aspect-ratio'

export function Basic() {
  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio } from '@destyler-ui/svelte'
</script>

<main style="width: 300px;">
  <AspectRatio.Root ratio={16 / 9}>
    <AspectRatio.Content>
      <img
        src="https://elonehoo.me/gallery/20_sun.jpg"
        alt="Sunset"
        style="width: 100%; height: 100%; object-fit: cover;"
      />
    </AspectRatio.Content>
  </AspectRatio.Root>
</main>

Portrait

<script setup lang="ts">
import { AspectRatio } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <AspectRatio.Root :ratio="9 / 16">
      <AspectRatio.Content>
        <img src="https://cover.sli.dev">
      </AspectRatio.Content>
    </AspectRatio.Root>
  </main>
</template>

import { AspectRatio } from '@destyler-ui/react'

export function Portrait() {
  return (
    <main style={{ width: '200px' }}>
      <AspectRatio.Root ratio={9 / 16}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            style={{ objectFit: 'cover', width: '100%', height: '100%' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

import { AspectRatio } from '@destyler-ui/solid/aspect-ratio'

export function Portrait() {
  return (
    <main style={{ width: '200px' }}>
      <AspectRatio.Root ratio={9 / 16}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio } from '@destyler-ui/svelte'
</script>

<main style="width: 200px;">
  <AspectRatio.Root ratio={9 / 16}>
    <AspectRatio.Content>
      <img src="https://elonehoo.me/gallery/20_sun.jpg" alt="Sunset" style="width: 100%; height: 100%; object-fit: cover;" />
    </AspectRatio.Content>
  </AspectRatio.Root>
</main>

Square

<script setup lang="ts">
import { AspectRatio } from '@destyler-ui/vue'
</script>

<template>
  <main>
    <AspectRatio.Root :ratio="1">
      <AspectRatio.Content>
        <div class="demo-content">
          1:1
        </div>
      </AspectRatio.Content>
    </AspectRatio.Root>
  </main>
</template>

import { AspectRatio } from '@destyler-ui/react'

export function Square() {
  return (
    <main style={{ width: '200px' }}>
      <AspectRatio.Root ratio={1}>
        <AspectRatio.Content>
          <div style={{
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontSize: '24px',
          }}
          >
            1:1
          </div>
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

import { AspectRatio } from '@destyler-ui/solid/aspect-ratio'

export function Square() {
  return (
    <main style={{ width: '200px' }}>
      <AspectRatio.Root ratio={1}>
        <AspectRatio.Content>
          <div
            style={{
              'width': '100%',
              'height': '100%',
              'display': 'flex',
              'align-items': 'center',
              'justify-content': 'center',
              'color': 'white',
              'font-size': '24px',
              'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            }}
          >
            1:1
          </div>
        </AspectRatio.Content>
      </AspectRatio.Root>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio } from '@destyler-ui/svelte'
</script>

<main style="width: 200px;">
  <AspectRatio.Root ratio={1}>
    <AspectRatio.Content>
      <div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: white; font-size: 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        1:1
      </div>
    </AspectRatio.Content>
  </AspectRatio.Root>
</main>

Root Provider

<script setup lang="ts">
import { AspectRatio, useAspectRatio } from '@destyler-ui/vue'

const aspectRatio = useAspectRatio({ ratio: 4 / 3 })
</script>

<template>
  <main>
    <AspectRatio.RootProvider :value="aspectRatio">
      <AspectRatio.Content>
        <img src="https://cover.sli.dev">
      </AspectRatio.Content>
    </AspectRatio.RootProvider>
  </main>
</template>

import { AspectRatio, useAspectRatio } from '@destyler-ui/react'

export function RootProvider() {
  const aspectRatio = useAspectRatio({ ratio: 4 / 3 })

  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.RootProvider value={aspectRatio}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            style={{ objectFit: 'cover', width: '100%', height: '100%' }}
          />
        </AspectRatio.Content>
      </AspectRatio.RootProvider>
    </main>
  )
}

import { AspectRatio, useAspectRatio } from '@destyler-ui/solid/aspect-ratio'

export function RootProvider() {
  const aspectRatio = useAspectRatio({ ratio: 4 / 3 })

  return (
    <main style={{ width: '300px' }}>
      <AspectRatio.RootProvider value={aspectRatio}>
        <AspectRatio.Content>
          <img
            src="https://elonehoo.me/gallery/20_sun.jpg"
            alt="Sunset"
            style={{ 'width': '100%', 'height': '100%', 'object-fit': 'cover' }}
          />
        </AspectRatio.Content>
      </AspectRatio.RootProvider>
    </main>
  )
}

<script lang="ts">
  import { AspectRatio, useAspectRatio } from '@destyler-ui/svelte'

  const id = $props.id()
  const aspectRatio = useAspectRatio({ id, ratio: 4 / 3 })
</script>

<main style="width: 300px;">
  <AspectRatio.RootProvider value={aspectRatio}>
    <AspectRatio.Content>
      <img src="https://elonehoo.me/gallery/20_sun.jpg" alt="Sunset" style="width: 100%; height: 100%; object-fit: cover;" />
    </AspectRatio.Content>
  </AspectRatio.RootProvider>
</main>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`ratio`	`1`	`number` The desired ratio.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultRatio`	—	`number` The initial ratio of the aspect ratio component when it is first rendered. Use when you do not need to control its ratio state.
`ids`	—	`Partial<{ root: string; content: string; }>` The ids of the elements in the aspect ratio. Useful for composition.
`ratio`	—	`number` The aspect ratio of the container

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseAspectRatioContext) => ReactNode`

RootProvider

Prop	Default	Type
`value*`	—	`UseAspectRatioReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js289.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultRatio`	—	`number` The initial ratio of the aspect ratio component when it is first rendered. Use when you do not need to control its ratio state.
`ids`	—	`Partial<{ root: string; content: string; }>` The ids of the elements in the aspect ratio. Useful for composition.
`ratio`	—	`number` The aspect ratio of the container

Content

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js289.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseAspectRatioContext) => Element`

RootProvider

Prop	Default	Type
`value*`	—	`UseAspectRatioReturn`
`asChild`	—	`(props: (userProps?: solid_js289.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultRatio`	—	`number`
`dir`	`"ltr"`	`"ltr" \| "rtl"` The document's text/writing direction.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; content: string; }>` The ids of the elements in the aspect ratio. Useful for composition.
`ratio`	—	`number` The aspect ratio of the container

Content

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/index").UseAspectRatioReturn]>`

RootProvider

Prop	Default	Type
`value*`	—	`UseAspectRatioReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`