Holding a shape in CSS

One property replaces the padding-top percentage trick everyone used to memorise.

.thumb {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0.5rem;
}

.avatar {
  inline-size: 3rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.embed {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  border: 0;
}

How it works

1. aspect-ratio sets height from width, or the other way round.
2. object-fit decides how the image fills the box it was given.
3. object-position moves the visible part when it has to crop.

Keywords and builtins used here

• avatar
• border
• embed
• rem
• thumb

The run, in numbers

Lines

20

Characters to type

270

Tokens

72

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 51 seconds.

Type this snippet

Step 2 of 3 in Sizing, step 15 of 24 in Flexbox & grid.

← Previous Next →