Images

Wrapper utilities for sizing images with the aspect-ratio property, can be applied to individual containers for single images or a grid container for multiple images.

Examples

Single images

Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees — `.auto`

Example HTML

<figure class="auto">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="300">
<figcaption><code>.auto</code></figcaption>
</figure>

<figure class="landscape">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="300">
<figcaption><code>.landscape</code></figcaption>
</figure>

<figure class="landscape-sm">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="300">
<figcaption><code>.landscape-sm</code></figcaption>
</figure>

<figure class="landscape-xs">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="300">
<figcaption><code>.landscape-xs</code></figcaption>
</figure>

<figure class="passport">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="150">
<figcaption><code>.passport</code></figcaption>
</figure>

<figure class="portrait">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="150">
<figcaption><code>.portrait</code></figcaption>
</figure>

<figure class="portrait-sm">
<img src="/img/docs/winter-forest-300.webp" alt="Snow covered clearing in forest with shadows from sunlight filtering through distant tall trees" width="150">
<figcaption><code>.portrait-sm</code></figcaption>
</figure>

Multiple images

The utilities can be used on wrapper elements to create a grid gallery of all child images within, the following example uses the grid utilities from the grids & gaps module.

A rocky stream next to a small copse of pinetrees on a grassy bank

A red fox with one eye blue and the other brown looking directly at camera

View of distant mountains and valleys scenery bathed in hazy sunlight

A small white and brown bird with orange chest colors sitting on a tree branch

Example HTML

<div class="passport grid g-2-sm g-4 gap-3 mb-3">
<img src="/img/docs/rocky-stream-480.webp" alt="A rocky stream next to a small copse of pinetrees on a grassy bank">
<img src="/img/docs/red-fox-480.webp" alt="A red fox with one eye blue and the other brown looking directly at camera">
<img src="/img/docs/hazy-mountains-480.webp" alt="View of distant mountains and valleys scenery bathed in hazy sunlight">
<img src="/img/docs/bird-on-branch-480.webp" alt="A small white and brown bird with orange chest colors sitting on a tree branch">
</div>

Inline styling

The aspect-ratio for the utilities are provided by a CSS variable that can be used to customize the ratio inline, it can be used to adjust any of utility classes above to individual images and/or on the grid wrapper to be applied to all images.

Sand dunes in desert with blue sky background — `--aspect-ratio: 5 / 1;`

Distant sand dunes in desert with blue sky background — `--aspect-ratio: 5 / 2;`

Wind rippled desert sands with distant sand dunes with blue sky and moon in background — `--aspect-ratio: 5 / 3;`

Example HTML

<figure class="auto" style="--aspect-ratio: 5 / 1;">
<img src="/img/docs/desert-300.webp" alt="Sand dunes in desert with blue sky background" width="300">
<figcaption><code>--aspect-ratio: 5 / 1;</code></figcaption>
</figure>

<figure class="auto" style="--aspect-ratio: 5 / 2;">
<img src="/img/docs/desert-300.webp" alt="Distant sand dunes in desert with blue sky background" width="300">
<figcaption><code>--aspect-ratio: 5 / 2;</code></figcaption>
</figure>

<figure class="auto" style="--aspect-ratio: 5 / 3;">
<img src="/img/docs/desert-300.webp" alt="Wind rippled desert sands with distant sand dunes with blue sky and moon in background" width="300">
<figcaption><code>--aspect-ratio: 5 / 3;</code></figcaption>
</figure>

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

@use "sassmods/scss/sassmods" as *;
@include images-css;

Using the framework

Enable the module in the sassmods-system.scss document as below.

$enable-images: true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins.

_images.scss

//  ------------------------------------------------------------
//  Images
//  ------------------------------------------------------------
@use "../../configuration" as *;

@if $enable-images {

.auto, .passport, .landscape, .landscape-sm, .landscape-xs, .portrait, .portrait-sm {
  display: grid;
  grid-template-columns: var(--gtc);
  max-inline-size: var(--width);
}

:where(.auto, .passport, .landscape, .landscape-sm, .landscape-xs, .portrait, .portrait-sm) img {
  object-fit: cover;
  aspect-ratio: var(--aspect-ratio);
  height: 100%;
}

.auto {
  --aspect-ratio: auto;
}

.passport {
  --aspect-ratio: 1 / 1;
}

.landscape {
  --aspect-ratio: 16 / 9;
}

.landscape-sm {
  --aspect-ratio: 3 / 1;
}

.landscape-xs {
  --aspect-ratio: 4 / 1;
}

.portrait {
  --aspect-ratio: 3 / 4;
}

.portrait-sm {
  --aspect-ratio: 4 / 6;
}

} // END [if/images]