Content
Image Views
A ratio-locked frame for a single piece of media — object-fit: cover, a fixed crop, and a shimmer skeleton while it loads.
Findings
What's actually in /ig
- Every media frame in /ig pairs aspect-ratio with object-fit: cover; object-position: center — the crop never reflows with content.
- The core ratio set is 1:1, 4:5, 9:16, 16:9, and a 3:4 editorial crop (see Shape's Aspect Ratio Gallery for the full table).
- A skeleton background (documented as a shimmer.gif reference in source, recreated here as a CSS gradient sweep) fills the frame before the asset loads — see Imagery.
Usage
When to use it
Use when
Use for media content requiring aspect-ratio enforcement and lazy-load shimmer, including feed images, profile media, Stories/Reels previews, and editorial creator cards.
Avoid when
Avoid for icons, avatars, or decorative artwork that must preserve the whole source image; those should use their own fixed-size or object-fit: contain treatment.
Anatomy
Anatomy
- 01
Ratio frame
- 02
Media object (object-fit: cover)
- 03
Loading skeleton
- 04
Optional scrim for overlaid text
Specification
Spacing, colour, type, and motion
- Aspect ratios
- 1:1, 4:5, 9:16, 16:9, and 3:4 editorial crop; use the documented ratio set before inventing a crop
- Fit
- object-fit: cover with object-position: center
- Loading fill
- Shimmer skeleton over rgb(var(--ig-secondary-background))
- Frame stability
- aspect-ratio locks the box before the asset loads
- Overlay
- Optional scrim gradient only when text sits on top of media
States
States
| State | Behaviour |
|---|---|
| Loading | The ratio frame is present and filled by a shimmer skeleton over --ig-secondary-background while the image request resolves. |
| Loaded | The media object fills the locked frame with object-fit: cover and object-position: center. |
| Failed | A neutral placeholder keeps the same aspect ratio so surrounding layout does not jump. |
| Pressed | Interactive media applies a temporary overlay or scrim while the pointer or touch is held. |
| Selected | Multi-select surfaces add a persistent selection overlay or check affordance without changing the crop. |
Examples
Real interface compositions
Profile media
Reel cover in a profile grid
A 4:5 creator portrait fills the frame with object-fit: cover; the username, view count, and Reels mark sit on a soft bottom scrim while the shimmer sweep holds the exact crop before the image resolves.
4:5 ratio, object-fit: cover, --ig-gradient-to-transparent, --ig-secondary-background shimmer
Guidance
Usage guidance
- Pick the ratio from the documented set (1:1, 4:5, 9:16, 16:9, 3:4) rather than an arbitrary crop — every image-bearing surface in /ig uses one of these.
- Never stretch or letterbox — object-fit: cover with object-position: center is universal.
- Pair text over an image view with a scrim gradient (see Colour), never a flat box.
Do / Don't
Do / Don't
Do
- Use the shimmer skeleton as the loading state, not a flat grey box.
- Keep the frame's aspect-ratio fixed so layout doesn't jump when the asset arrives.
Don’t
- Introduce a sixth aspect ratio outside the documented set without new evidence.
- Crop with object-fit: contain — every instance found uses cover.
Code
Evidence-backed CSS
.image-view {
aspect-ratio: 4 / 5; /* or 1/1, 9/16, 16/9, 3/4 — see Shape */
object-fit: cover;
object-position: center;
}See also