Aspect Ratio

⟦Á médíá frámé thát préšérvéš ítš wídth-tó-héíght rátíó.~~~~~~~~~~~~~~~~~~~~⟧

⟦Brówšérš~~~⟧: Chrome 123+Firefox 121+Safari 17.5+
⟦Tíér~~⟧: 0
⟦Búñdlé çómpréššéd~~~~~~⟧: 268 B
⟦Fórçéd láýóút búdgét~~~~~~~⟧: 0 ms
⟦Áxé búdgét~~~~⟧: 0
⟦ŠŠR çómpátíblé~~~~~⟧: ⟦Ýéš~~⟧
⟦Públíšhéd çóñtráçt~~~~~~~⟧: ⟦Téšt hárñéšš~~~~~⟧

⟦Pláýgróúñd~~~~⟧

16:9 · Cover

An amber sun above overlapping blue mountain ridges

React

CSS

Tailwind

@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;
    }
  }
}

⟦Éxámpléš~~~⟧

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>

⟦ÁPÍ~~⟧

`AspectRatio`

⟦Próp~~⟧	⟦Týpé~~⟧	⟦Défáúlt~~~⟧	⟦Déšçríptíóñ~~~~⟧
`ratio`	`number`	`1`	⟦Póšítívé fíñíté wídth dívídéd bý héíght. Íñválíd ñúmbérš fáll báçk tó 1. Whéñ ómíttéd, thé ÇŠŠ çúštóm própértý çáñ šét thé rátíó.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`children`	`ReactNode`	—	⟦Çóñtéñt pláçéd íñšídé thé frámé. Íñtríñšíç çóñtéñt çáññót éñlárgé thé frámé.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`className`	`string`	—	⟦Çlášš ápplíéd tó thé frámé róót.~~~~~~~~~~~~⟧
`style`	`CSSProperties`	—	⟦Ñátívé róót štýléš, íñçlúdíñg --úíífý-ášpéçt-rátíó whéñ rátíó íš ómíttéd.~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
`ref`	`Ref<HTMLElement>`	—	⟦Réf fórwárdéd tó thé réñdéréd róót éléméñt.~~~~~~~~~~~~~~~~⟧
`as`	`ElementType`	`"div"`	⟦Ñátívé éléméñt ór çómpóñéñt úšéd fór thé róót.~~~~~~~~~~~~~~~~~⟧
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	⟦Répláçé thé réñdéréd róót whílé préšérvíñg ítš própš, réf áñd ídéñtítý márkér.~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Kéýbóárd~~~⟧

⟦Kéý~~⟧	⟦Áçtíóñ~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Štátíç láýóút áddš ñó rólé, fóçúš tárgét ór kéýbóárd béhávíór. Gívé méáñíñgfúl ímágéš ált téxt; kéép çáptíóñš óútšídé thé frámé. Réqúíréd béhávíór ÇŠŠ préšérvéš thé rátíó évéñ whéñ çhíldréñ hávé íñtríñšíç díméñšíóñš. Óptíóñál štýléš fíll ímágéš wíth óbjéçt-fít: çóvér; úšé çóñtáíñ tó šhów thé éñtíré ímágé.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧

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

⟦Fráméwórk~~~~⟧

⟦Štýlé~~⟧

⟦Thémé~~⟧

⟦Láñgúágé~~~⟧