| 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
- 16:9 — video, hero images
- 4:3 — landscape photo
- 3:4 — portrait photo
- 1:1 — social media, square cards
- 21:9 — cinematic, wide hero
- 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:
- Choose central crop OR rule-of-thirds subject
- Maintain face proximity (don't crop heads tight to edge)
- Preserve compositional balance
- 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.
