Demo · image in a frame
Fill, fit or original format.
Kits show images in frames with a fixed aspect ratio. If a subject does not fit – portrait in widescreen, a logo, a graphic – editors choose per image and placement how it goes into the frame. Here the same portrait photo three times in a 16:9 grid.
Same photo, three settings
Fill · Fit · Original
Portrait 3:4 in a 16:9 frame.
-
Fill (kit default): cropped around the focal point -
Fit, blurred background: the whole image, edges from the subject -
Original format: the frame takes on the portrait format
Background when fitting
Kit colour · fixed colour · automatic
Logos, SVG and PNG with a transparent margin are fitted automatically.
-
Fit, kit colour (“cards”) – switches light/dark -
Fit, fixed colour (navy #314164) -
Transparent SVG (made-up example logo): fitted automatically, no setting needed
How it works
Per placement or as the image default.
-
Three modes
Fill crops (with focal point), fit shows the whole image, original lets the frame follow the image.
-
Background
When fitting: transparent, blurred subject, fixed colour or a kit colour – which switches with the dark colour scheme.
-
Where to set it?
In the block at the image (“Image in a frame”) for this placement – or in the media library as the default everywhere.
-
No kit changes
Classes on the image and a small core stylesheet – strict CSP, no inline styles, works in every kit.