Images
object-fit
object-fit sets how the content of an img or video fits inside the element’s frame. Use it to show images whose aspect ratio differs from the frame without distorting them.
Syntax
fill | contain | cover | none | scale-downPreview
Presets
Drag the bottom-right corner to resize
Code
.box {
object-fit: contain;
}Controls
object-fitcontain
About
What the values do
fill(the initial value) stretches to the frame. A different aspect ratio gets distorted.containkeeps the aspect ratio and picks the largest size that fits entirely, leaving gaps.coverkeeps the aspect ratio and covers the frame with no gaps, cropping whatever overflows.nonekeeps the natural size.scale-downpicks whichever ofnoneandcontainis smaller, so small images never get blown up.
Give the frame a size
object-fit only matters when the image’s aspect ratio differs from the frame’s. Set both width and height (or an aspect-ratio). With only one, the frame follows the image’s ratio and nothing changes.
Related properties
- Move the image with
object-position, which defaults to the center (50% 50%). - It only affects replaced elements such as
imgandvideo. For background images, usecover/containinbackground-size. - The preview here puts a sample image (a 96×96 square) inside the box and passes the box’s value on to it. Drag the box’s corner to change its aspect ratio and see the difference.