---
title: "Image"
subtitle: "A base class and an aspect ratio, composed"
description: "How images are sized on the web: a base class handles fit and fill, and an aspect-ratio class locks the shape so a layout holds before the file loads."
author: "Studio"
section: "Website"
subsection: "Foundations"
order: 14
status: "published"
---

Images compose the same way borders do: `.img` sets the fill behaviour, and an aspect-ratio class locks the shape. The pair together means a layout holds its geometry before the file has loaded, so nothing reflows as images arrive.

## The base class

`.img` on its own fills the width of its container and keeps its natural proportions.

| Property | Value | Why |
| --- | --- | --- |
| `display` | `block` | Removes the baseline gap an inline image leaves beneath it |
| `width` | `100%` | Fills the container rather than rendering at intrinsic size |
| `height` | `auto` | Keeps the natural ratio when no aspect class is applied |
| `object-fit` | `cover` | Fills the box and crops the overflow, so an aspect class never distorts the picture |

```html
<img class="img" src="/assets/images/og-default.png" alt="…">
```

## Aspect ratios

Add one ratio class to lock the shape. Because `object-fit` is `cover`, the image crops to fill rather than stretching — the subject stays in proportion at every ratio.

<div class="demo-preview is-joined">
  <div class="block gap-xl">
    <div class="block gap-m">
      <p class="demo-eyebrow">.img-1x1 — square, for an avatar or a topic tile</p>
      <img class="img img-1x1" src="/assets/images/og-default.png" alt="Square crop of the brand mark">
    </div>
    <div class="block gap-m">
      <p class="demo-eyebrow">.img-4x3 — the classic photograph</p>
      <img class="img img-4x3" src="/assets/images/og-default.png" alt="Four-by-three crop of the brand mark">
    </div>
    <div class="block gap-m">
      <p class="demo-eyebrow">.img-3x2 — a wider editorial crop</p>
      <img class="img img-3x2" src="/assets/images/og-default.png" alt="Three-by-two crop of the brand mark">
    </div>
    <div class="block gap-m">
      <p class="demo-eyebrow">.img-16x9 — video, and the share card</p>
      <img class="img img-16x9" src="/assets/images/og-default.png" alt="Sixteen-by-nine crop of the brand mark">
    </div>
    <div class="block gap-m">
      <p class="demo-eyebrow">.img-21x9 — a cinematic banner</p>
      <img class="img img-21x9" src="/assets/images/og-default.png" alt="Twenty-one-by-nine crop of the brand mark">
    </div>
  </div>
</div>

```html
<img class="img img-16x9" src="/assets/images/og-default.png" alt="…">
```

| Class | Ratio | Suits |
| --- | --- | --- |
| `.img-1x1` | 1 : 1 | Avatars, topic tiles, anything in a grid where the shape should be uniform |
| `.img-4x3` | 4 : 3 | A standard photograph, and the safest default for supplied imagery |
| `.img-3x2` | 3 : 2 | An editorial crop with a little more width |
| `.img-16x9` | 16 : 9 | Video thumbnails and the share card |
| `.img-21x9` | 21 : 9 | A banner, where the image is a band rather than a picture |

## Rules

- **Always pair a ratio with `.img`.** The ratio class sets shape and nothing else; without the base class there is no `object-fit`, and the picture distorts to fill the box.
- **Never set width or height on the element.** The class owns both; an attribute or inline size fights it and reintroduces the reflow the ratio exists to prevent.
- **Write real `alt` text, or an empty one deliberately.** `alt=""` tells a screen reader to skip a decorative image, which is correct; a missing `alt` makes it read the filename.
- **Choose the ratio for the content, not the layout.** A face cropped to 21:9 loses the face; if the band is what the layout needs, the image should be one that survives it.