Skip to content
Destyler UI Destyler UI Destyler UI
Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Features

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/aspect-ratio @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/aspect-ratio @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/aspect-ratio @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/aspect-ratio @destyler/solid

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import * as aspectRatio from '@destyler/aspect-ratio'
import { normalizeProps, useMachine } from '@destyler/vue'
import { computed, useId } from 'vue'


const [state, send] = useMachine(aspectRatio.machine({
  id: useId(),
}))
const api = computed(() =>
  aspectRatio.connect(state.value, send, normalizeProps),
)
</script>


<template>
  <div v-bind="api.getRootProps()">
    <div v-bind="api.getContentProps()">
      <img >
    </div>
  </div>
</template>
import type { FC } from 'react'
import * as aspectRatio from '@destyler/aspect-ratio'
import { normalizeProps, useMachine } from '@destyler/react'
import { useId } from 'react'


export default const AspectRatio: FC = () => {


  const [state, send] = useMachine(aspectRatio.machine({
    id: useId(),
  }))


  const api = aspectRatio.connect(state, send, normalizeProps)


  return (
    <>
      <div {...api.getRootProps()}>
        <div {...api.getContentProps()}>
          <img/>
        </div>
      </div>
    </>
  )
}
<script lang="ts">
import * as aspectRatio from '@destyler/aspect-ratio'
import { normalizeProps, useMachine } from '@destyler/svelte'


const uid = $props.id();


const [state, send] = useMachine(aspectRatio.machine({
  id: uid,
}))
const api = $derived(aspectRatio.connect(state, send, normalizeProps))
</script>


<main>
  <div {...api.getRootProps()}>
    <div {...api.getContentProps()}>
      <img />
    </div>
  </div>
</main>
import * as aspectRatio from '@destyler/aspect-ratio'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo, createUniqueId } from 'solid-js'


export default function AspectRatio() {


  const [state, send] = useMachine(aspectRatio.machine({
    id: createUniqueId(),
  }))
  const api = createMemo(() => aspectRatio.connect(state, send, normalizeProps))
  return (
    <>
      <div {...api().getRootProps()}>
        <div {...api().getContentProps()}>
          <img />
        </div>
      </div>
    </>
  )
}

Set desired ratio

The component accepts any ratio. The default is 16:9.

const [state, send] = useMachine(
  aspectRatio.machine({
    ratio: 16 / 9,
  }),
)

Styling guide

Earlier, we mentioned that each aspect ratio part has a data-part attribute added to them to select and style them in the DOM.

[data-part="root"] {
  /* styles for root */
}


[data-part="content"] {
  /* styles for content */
}

Methods and Properties

Machine Context

The aspect ratio machine exposes the following context properties:

ratio
number
The aspect ratio of the container
ids
Partial<{ root: string; content: string; }>
The ids of the elements in the aspect ratio. Useful for composition.
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
dir(default: "ltr")
"ltr" | "rtl"
The document's text/writing direction.

Machine API

The aspect ratio api exposes the following methods:

setRatio
(ratio: number) => void
Function to set the aspect ratio

Data Attributes

Root

attribute
description
data-scope
aspect-ratio
data-part
root

Content

attribute
description
data-scope
aspect-ratio
data-part
content

Timer

Breadcrumbs