Aspect Ratio

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

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

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

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18

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

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22

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

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