Aspect Ratio

A media frame that preserves its width-to-height ratio.

Navegadores: Chrome 123+Firefox 121+Safari 17.5+
Nível: 0
Tamanho compactado: 268 B
Limite de layout forçado: 0 ms
Limite do axe: 0
Compatível com SSR: Sim
Contrato publicado: Ambiente de teste

Experimentar

16:9 · Cover

An amber sun above overlapping blue mountain ridges

React

CSS

Tailwind

import { AspectRatio } from "@gunkin/uiify";

export default function Example() {
  return (
    <AspectRatio ratio={16 / 9} className="">
      <img src="/mountains.svg" width="640" height="400" alt="An amber sun above blue mountain ridges" />
    </AspectRatio>
  );
}

@layer components {
  [data-uiify-aspect-ratio] {
    border-radius: var(--radius-md);
    background: var(--muted);
  }

  [data-uiify-aspect-ratio] > [data-part="content"] {
    border-radius: inherit;
  }

  [data-uiify-aspect-ratio] > [data-part="content"] > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
}

import { AspectRatio } from "@gunkin/uiify";

export default function Example() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="
        rounded-md bg-muted [&>[data-part=content]]:[border-radius:inherit] [&>[data-part=content]>img]:block
        [&>[data-part=content]>img]:[inline-size:100%] [&>[data-part=content]>img]:[block-size:100%]
        [&>[data-part=content]>img]:[border-radius:inherit] [&>[data-part=content]>img]:object-cover
      "
    >
      <img src="/mountains.svg" width="640" height="400" alt="An amber sun above blue mountain ridges" />
    </AspectRatio>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('rounded-md bg-muted [&>[data-part=content]]:[border-radius:inherit] [&>[data-part=content]>img]:block [&>[data-part=content]>img]:[inline-size:100%] [&>[data-part=content]>img]:[block-size:100%] [&>[data-part=content]>img]:[border-radius:inherit] [&>[data-part=content]>img]:object-cover');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

Exemplos

Square

The default ratio is 1. A square frame crops a landscape image at the sides.

import { AspectRatio } from "@gunkin/uiify";

<AspectRatio>
  <img src="/mountains.svg" width="640" height="400" alt="An amber sun above blue mountain ridges" />
</AspectRatio>

Portrait

Set ratio to 4 / 5 for a portrait frame. The image keeps its proportions while filling the frame.

import { AspectRatio } from "@gunkin/uiify";

<AspectRatio ratio={4 / 5}>
  <img src="/mountains.svg" width="640" height="400" alt="An amber sun above blue mountain ridges" />
</AspectRatio>

Contain

Apply .uncropped { object-fit: contain; } to keep the whole image visible. The optional skin supplies the frame background.

import { AspectRatio } from "@gunkin/uiify";

<AspectRatio ratio={16 / 9}>
  <img className="uncropped" src="/mountains.svg" width="640" height="400" alt="An amber sun above blue mountain ridges" />
</AspectRatio>

API

`AspectRatio`

Prop	Tipo	Padrão	Descrição
`ratio`	`number`	`1`	Positive finite width divided by height. Invalid numbers fall back to 1. When omitted, the CSS custom property can set the ratio.
`children`	`ReactNode`	—	Content placed inside the frame. Intrinsic content cannot enlarge the frame.
`className`	`string`	—	Class applied to the frame root.
`style`	`CSSProperties`	—	Native root styles, including --uiify-aspect-ratio when ratio is omitted.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the rendered root element.
`as`	`ElementType`	`"div"`	Native element or component used for the root.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered root while preserving its props, ref and identity marker.

Teclado

Tecla	Ação

Acessibilidade

Static layout adds no role, focus target or keyboard behavior. Give meaningful images alt text; keep captions outside the frame. Required behavior CSS preserves the ratio even when children have intrinsic dimensions. Optional styles fill images with object-fit: cover; use contain to show the entire image.

Pontos de integração de estilos

data-uiify-aspect-ratiodata-part="content"--uiify-aspect-ratio

Framework

Estilo

Tema

Idioma