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); }
/* ... */

If you want to apply a specific aspect ratio to an image, a video or an iframe, you should apply the .aspect-ratio-{ratio} class to their parent:

<figure class="aspect-ratio-4:3">
  <img src="image.jpg" alt="Image description">
</figure>

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

// 👇 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>

The current aspect-ratio classes don't use the aspect-ratio CSS property because of the current lack of browser support. If you don't need to support older browsers, you can create custom ratio classes in your custom-style/_util.scss CodyFrame file:

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