CSS Dojo
道場 · practice
Tracks
·
Write real CSS. Match the target.
←
All tracks
Track
CSS Images
aspect-ratio, object-fit and object-position — how to size boxes and frame images inside them.
↗
CSS images
01
A box that keeps its shape
☆
☆
☆
02
Height first, width follows
☆
☆
☆
03
The ratio survives resizing
☆
☆
☆
04
Cover the box, crop the rest
☆
☆
☆
05
Contain the whole image
☆
☆
☆
06
Choose which part shows
☆
☆
☆
07
Fit and position together
☆
☆
☆
08
Ratio the box, fit the image
☆
☆
☆
09
Boss: build the image card
☆
☆
☆