aspect-ratio-discipline

name	aspect-ratio-discipline
description	Use when sizing images and embedded media. Consistent aspect ratios (16:9, 4:3, 1:1, 3:4) signal designed layout.

Aspect Ratio Discipline

Stick to standard aspect ratios. Mix-and-match aspect ratios = patched-together. Use 4-5 ratios maximum across a brand.

Recommended ratios

1. 16:9 — video, hero images
2. 4:3 — landscape photo
3. 3:4 — portrait photo
4. 1:1 — social media, square cards
5. 21:9 — cinematic, wide hero
6. 3:2 — landscape product, photo crops

Pick 4-5 and stick to them. Don't add new ratios per page.

CSS aspect-ratio property

.video-thumbnail { aspect-ratio: 16/9; }
.portrait-photo { aspect-ratio: 3/4; }
.square-card { aspect-ratio: 1/1; }

Modern browsers support this. Fallback: padding-bottom trick for older.

Image cropping discipline

When cropping for the brand's ratio:

1. Choose central crop OR rule-of-thirds subject
2. Maintain face proximity (don't crop heads tight to edge)
3. Preserve compositional balance
4. Crop multiple aspect ratios from same source if needed (1:1 social + 16:9 hero)

Where this fits in the X3 empire

Aspect-ratio rules for CardPrepAI photography and embeds.