Aspect Ratio - v3

Aspect-ratio utility classes in CodyFrame v3:

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>

If you prefer using the native CSS aspect-ratio property, use the following classes:

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