Aspect ratios

Here are several utility classes that can be used on wrapper elements for constraining the aspect ratio of whatever is their immediate child element. These can be used to wrap tiles, cards, images, videos, embeds, or whatever you need to be constrained to an aspect ratio.

Since v.1.0.3, Codebase 5 uses the new aspect-ratio CSS property, since this has seen widespread adoption in browsers in 2021.

Notes on aspect ratios

Codebase 5’s aspect-ratio classes maintain a block wrapper’s aspect ratio unless deformed by excess content within. For example, you may have a hero image with a text overlay. On wider viewports it makes sense to maintain the aspect ratio but on small phones the text may be too much for the down-scaled wrapper, so you will want it to be taller than the aspect ratio requires in order to still contain the overlay text.

Image/video aspect ratios

<div class="aspect-ratio-9x16"> ... </div>

<div class="aspect-ratio-5x7"> ... </div>

<div class="aspect-ratio-7x5"> ... </div>

<div class="aspect-ratio-16x9"> ... </div>

<div class="aspect-ratio-21x9"> ... </div>

<div class="aspect-ratio-24x9"> ... </div>

<div class="aspect-ratio-32x9"> ... </div>

Note: aspect-ratio-24×9 and aspect-ratio-32×9 have been included in Codebase, although these are not common image or video aspect ratios, becausethey are useful for full-width hero components where you want your top menubar plus the hero plus a teaser of your subsequent content to be on display on a laptop screen (laptops, display monitors, and HDTVs often have screen sizes of 16x9 or 21×9 aspect ratio).

Besides the “all viewports” examples above, since Codebase v.5.2.6 there are media query tiered variants of the image/video tile aspect ratio classes: xs:, sm:, md:, and lg:.

These variants have been provided primarily for images and components using a background image, where you might want different aspect ratios at different media query breakpoint widths. E.g. now you can have an img-cover image panel (such as a hero component) as a square (aspect-ratio-1x1) on phones and as a landscape (aspect-ratio-16x9) on wide screens.

Aspect ratio styles can be distorted

aspect-ratio-* wrappers constrain their content to the set aspect ratio unless there’s too much content in the immediate child element. This means that at small viewport widths, if you have a lot of text content inside, it will “override” the aspect ratio for phones. Example:

<div class="aspect-ratio-21x9 bg-amber-200 flex flex-center flex-middle">
  <div class="w-xs p-1">
    Lorem ipsum dolor sit amet...
  </div>
</div>

This deformation is a good thing, because it means that downstream designers and content creators can’t break your layout wrapper so easily.

However, in situations where you don’t want this deformation to happen, you can simply wrap your content in a block with the CSS class box – and you may need to add overflow-y if you have content therefore needs to be scrolled.

Squared tile aspect ratios

For setting up squared tile arrays, as popularised by the modern Microsoft Windows home screen (or, desktop) layout.

There are sufficient aspect ratio squared tile utility classes, for up to a 6×6 tile layout — and “responsive” breakpoint width xs, sm, md, and lg variants of each squared tile are included. This is because Codebase squared tile aspect ratios can be mapped on to the Codebase 6×6 grid system.

Example:

<div class="mb-2 grid equal-6-cols">
  <div class="col-1 row-1 aspect-ratio-1x1">
    1×1
  </div>
  <div class="col-2 rows-1-2 aspect-ratio-1x2">
    1×2
  </div>
  <div class="col-3 rows-1-3 aspect-ratio-1x3">
    1×3
  </div>
  <div class="cols-4-6 row-1 aspect-ratio-3x1">
    3×1
  </div>
  <div class="col-1 row-2 aspect-ratio-1x1">
    1×1
  </div>
  <div class="cols-4-6 rows-2-5 aspect-ratio-3x5">
    3×5
  </div>
  <div class="cols-1-2 row-3 aspect-ratio-2x1">
    2×1
  </div>
  <div class="cols-1-3 rows-4-5 aspect-ratio-1x1">
    1×1
  </div>
</div>

Available square tile aspect-ratio- utility suffixes in Codebase:

The ‘missing’ utilities are unnecessary. E.g. you don’t need -3x3 because you can use -1x1; you don’t need -2x4 because you can use -1x2 and so on.

Besides the “all viewports” examples above, there are media query tiered variants of the squared tile aspect ratio classes: xs:, sm:, md:, and lg:.

These variants enable you to both set up and rearrange a square tile array for different device sizes.

Another example:

Images: gulls by Daniyal Ghanavati; robin by Pixabay; swans by Trudie Roden; owl by Eric Karits. All obtained from Pexels.

<div class="grid equal-2-cols sm:equal-3-cols">
  <div class="col-1 rows-1-2 aspect-ratio-1x1 aspect-ratio-1x2 relative">
    <img class="box img-cover" src="" alt="">
  </div>
  <div class="sm:col-2 sm:row-1 aspect-ratio-1x1 relative">
    <img class="box img-cover" src="" alt="">
  </div>
  <div class="sm:col-3 sm:row-1 aspect-ratio-1x1 relative">
    <img class="box img-cover" src="" alt="">
  </div>
  <div class="cols-1-2 row-3 sm:cols-2-3 sm:row-2 aspect-ratio-1x1 aspect-ratio-2x1 relative">
    <img class="box img-cover" src="" alt="">
  </div>
</div>

Responsive aspect ratio unsetting

There may be situations on large viewports where it makes sense to unset (i.e. reset or override) aspect ratios, and instead rely on your layout to control your components’ dimentions. For example, you may have an image panel or a card that needs to have an aspect ratio set, to make it have a (minimum) height on small devices, but on large devices that aspect ratio would interfere with your grid system layout.

Since v.5.2.10, Codebase has aspect-ratio-unset for all of Codebase’s responsive tiers:

• xs:aspect-ratio-unset
• sm:aspect-ratio-unset
• lg:aspect-ratio-unset
• xl:aspect-ratio-unset