🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Aspect Ratio

Aspect-ratio utility classes:

Class Description
.aspect-ratio-16:9 set aspect-ratio = 16:9
.aspect-ratio-3:2 set aspect-ratio = 3:2
.aspect-ratio-4:3 set aspect-ratio = 4:3
.aspect-ratio-5:4 set aspect-ratio = 5:4
.aspect-ratio-1:1 set aspect-ratio = 1:1
.aspect-ratio-4:5 set aspect-ratio = 4:5
.aspect-ratio-3:4 set aspect-ratio = 3:4
.aspect-ratio-2:3 set aspect-ratio = 2:3
.aspect-ratio-9:16 set aspect-ratio = 9:16

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>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us