Aspect Ratio Design

Image and media aspect ratio standards, responsive aspect ratios, and consistent media sizing.

dragoon0x acda405 887 B Updated

File contents

Aspect Ratio Design

Common Aspect Ratios

Ratio Use Case
1:1 Avatars, thumbnails, social posts
4:3 Product photos, presentations
3:2 Photography, cards
16:9 Video, hero images, banners
21:9 Ultrawide heroes, cinematic
9:16 Vertical video (Stories, Reels)

Implementation

.media {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

Rules

  1. Consistent ratios within a grid. Mixed ratios in a card grid = visual chaos.
  2. object-fit: cover for photos (crops to fill). contain for logos/icons.
  3. object-position to control crop focal point.
  4. Responsive ratios: wider on desktop, taller on mobile (e.g., 21:9 → 16:9 → 4:3).

dragoon0x/everything-design-taste/tree/main/skills/aspect-ratio-design commit acda405ca5

Frequently asked questions

npx skillmds@latest add dragoon0x/aspect-ratio-design