Page 5

Images & media laboratory

Aspect ratios, object-fit, overlays, rounded corners, SVG, icons and layered compositions.

M-01 · Aspect ratios (16:9, 1:1, 3:4, 21:9)
Mountain valley at sunrise
16:9 cover
Sunlit forest path
1:1 cover
Foggy hills
3:4 cover
Lake between mountains
21:9 cover, top
M-02 · object-fit: cover / contain / fill / none
Cat portrait (cover)
cover
Cat portrait (contain)
contain
Cat portrait (fill)
fill
Cat portrait (none)
none
M-03 · Image cards: overlay, rounded, nested, caption over image
Tropical beachOverlay

Overlay card

Shade div over image, chip absolutely positioned.

Portrait of a smiling woman

Circle crop

border-radius 50% + aspect-ratio 1.

Starry sky over snowy mountains

Nested ×3

Image inside three wrapper divs.

M-04 · Inline SVG illustration + icon set
  • Home
  • User
  • Mail
  • Star
M-05 · Layered composition (3 images + shape + caption)
Laptop on a wooden desk People in a meeting room Hands typing on a laptop

Three overlapping images, one decorative shape, z-index 1–4.

M-06 · CSS background image (replaceable?)

Background-image banner

This image lives in CSS, not in an <img>.