Aspect Ratio

Aspect-ratio utility classes:

The .aspect-ratio-{ratio} classes use the padding hack to set the aspect ratio of the element they're applied to.

[class^="aspect-ratio"], [class*=" aspect-ratio"] {
  --aspect-ratio: calc(16/9);
  position: relative;
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &:not(iframe) {
      object-fit: cover;
    }
  }
}

.aspect-ratio-16\:9 { --aspect-ratio: calc(16/9); }
.aspect-ratio-3\:2  { --aspect-ratio: calc(3/2); }
.aspect-ratio-4\:3  { --aspect-ratio: calc(4/3); }
.aspect-ratio-5\:4  { --aspect-ratio: calc(5/4); }
.aspect-ratio-1\:1  { --aspect-ratio: calc(1/1); }
.aspect-ratio-4\:5  { --aspect-ratio: calc(4/5); }
.aspect-ratio-3\:4  { --aspect-ratio: calc(3/4); }
.aspect-ratio-2\:3  { --aspect-ratio: calc(2/3); }
.aspect-ratio-9\:16 { --aspect-ratio: calc(9/16); }

How you can create additional aspect-ratio classes in the /custom-style/_util.scss file of CodyFrame:

// 👇 how to create a custom aspect-ratio class
.aspect-ratio-21\:9 { --aspect-ratio: calc(21/9); }

If the .aspect-ratio-{ratio} element is a descendant of an element with display flex or grid, you may need to specify its width (the default width may be zero otherwise).

You can do that using the width utility classes:

<div class="flex">
  <figure class="aspect-ratio-4:3 width-100%">
    <img src="my-image.jpg" alt="Image Description">
  </figure>

  <!-- ... -->
</div>