Aspect Ratio & object-fit
Fit a placeholder image into a box — watch how the box shape, fit mode, and focal point interact.
Presets
Box aspect ratio
/
box W : H
Box width
Source image shape
/
image W : H
object-fit only has a visible effect when the image shape differs from the box shape.
object-fit
object-position
x
y
Live preview
The dashed outline is the styled box. The image inside is a procedurally drawn placeholder — its labeled grid & corner badges (TL / TR / BL / BR) make cropping and focal shifts visible. The checkerboard shows any box area the image does not cover.
All four fit modes, side by side
Same box, same image, same focal point — only
object-fit changes. Your current choice is highlighted.
CSS