The Media panel includes styles related to the Image Block. In the future this will cover other media type elements.
Object Fit
object-fit
object-fit controls how an image (or video) fits inside its container, especially when the container’s aspect ratio is different from the image.
Values
fill– Stretches the image to fill the container (can distort).contain– Scales the image to fit inside the container without cropping (may leave empty space).cover– Scales the image to cover the container, cropping if necessary.none– Keeps the image’s original size — no scaling.scale-down– Chooses the smaller result betweennoneandcontain.
Image Block default uses cover
GenerateBlocks uses object fit cover as its default as this allows images to be resized from the Settings panel without distortion.
Object Position
object-position
object-position controls where the image (or video) sits inside its container — kind of like aligning a background image.
Example Values
center center– (Default) Centers the image both horizontally and vertically.- Custom values – e.g.,
25% 75%moves the image 25% from the left and 75% from the top.
