CSS object-fit in Figma: How Image Fit, Background Size, and Resolution Carry Over

Short answer: fit maps cleanly, resolution does not

CSS object-fit and background-size describe the same decisions as Figma's image fill modes: scale the image to cover the box, scale it to fit inside the box, or repeat it. The names differ, but the behaviour lines up closely. Resolution is another story. A CSS rule says nothing about how many pixels the file holds, so a sharp image on the page can still arrive soft in Figma.

This reference covers the five object-fit values, the background-size keywords, the four Figma fill modes, and the resolution rules that decide whether an imported image looks right. It's written for designers who open an imported page and need to know what to check on each image layer.

object-fit and Figma fill modes

The five object-fit values

According to MDN's object-fit reference, the property sets how the content of a replaced element, such as an <img> or <video>, is resized to fit its container. It has no effect on <iframe>, <embed> or <fencedframe>. The initial value is fill.

• fill: the object is sized to fill the content box. If the aspect ratio differs, the image is stretched.
• contain: the object is scaled to keep its aspect ratio while fitting inside the box. On a mismatch it is letterboxed or pillarboxed.
• cover: the object keeps its aspect ratio and fills the entire box. On a mismatch it is clipped.
• none: the object is not resized.
• scale-down: the object is sized as if none or contain were specified, whichever gives the smaller size.

Where the image sits inside the box is controlled separately by object-position. That matters in Figma too. A cover image is cropped, and object-position decides which part survives.

The four Figma fill modes

Figma has no image layer type. Per Figma's guide to adjusting image properties, an image is a fill on a shape, frame or text layer, and it has four modes:

• Fill: positions and scales the image so it takes up the entire layer. If the shapes differ, Figma may clip the image.
• Fit: keeps the entire image visible inside the layer. Depending on the layer's shape, the image may not fill it completely.
• Crop: lets you adjust the boundary lines to control which part of the image you see.
• Tile: repeats the original image across the layer, with a tile size set as a percentage of the image's original dimensions.

Side by side

The last column is a match by behaviour, not a promise about what any importer writes. Open the fill panel on the imported layer and read the mode that is actually set. UnHTML's import report lists what fell back during an import, and it is not a pixel-exact clone, so treat the fill panel as the source of truth.

background-size: cover, contain, and auto

When the page uses a CSS background instead of an <img>, the rules come from background-size. The initial value is auto auto.

• cover scales the image, preserving its ratio, to the smallest size that fills the container with no empty space. The image is cropped vertically or horizontally if the proportions differ.
• contain scales the image as large as possible without cropping or stretching. If the container is larger than the image, the image tiles unless background-repeat is no-repeat.
• auto scales in that direction while keeping the image's intrinsic proportions.
• A length stretches the image to that size. A percentage is relative to the background positioning area, which is the padding box by default and the entire viewport when background-attachment is fixed.

The tiling clause is the one that bites. A contain background on a wide banner can repeat in the browser, and the design you expect from the screenshot depends on background-repeat. In Figma, repetition is Tile mode, and its size is a percentage of the image's original dimensions. If you see a repeated pattern after import, look for background-repeat in the source CSS before assuming the import is wrong.

Resolution: intrinsic size, density, and the 4096 px limit

Intrinsic size

A raster file has a fixed width and height in pixels. MDN's responsive images guide puts it plainly: a small raster image starts to look grainy when displayed larger than its original size. Bitmaps always have intrinsic dimensions and proportions, which is why object-fit and background-size can reason about them.

srcset and density

Pages often serve different files to different screens. With srcset and x descriptors, an image shown at 320 CSS pixels wide can load a 320 px file on a standard display and a 640 px file on a screen with two device pixels per CSS pixel. In MDN's example the 640 px file is 93 KB and the 320 px file is 39 KB. With srcset and sizes, the browser picks a file from the slot width instead.

That's why an imported image can look softer than the live page. The page may have chosen a larger file for your screen than the one the capture saw. When an image looks grainy after import, find out which file was captured and how wide it is, then compare that with the size of the layer.

Figma's 4096 px limit

Per Figma's help article on adding images, Figma limits images to 4096 x 4096 pixels. A larger asset is scaled down proportionally so the longest side is 4096 px or less, and some file metadata may be lost in the process. Supported formats are JPG, PNG, HEIC, WebP, GIF and TIFF (TIFF only on Safari), as of 2026.

Two things follow. A very large hero photo is reduced on the way in, so the layer holds at most 4096 px on its long side. And because the image is a fill, you cannot scale the image itself. You scale the layer it fills, and Figma keeps the fill mode while you do.

Backgrounds that are not bitmaps

Not every background has pixels. Per MDN, vector images such as SVG do not necessarily have intrinsic dimensions, and CSS gradients have none, so background-size: auto falls back to the size of the positioning area. MDN also warns that sizing for vector images without intrinsic dimensions is not fully implemented in all browsers, so test in more than one. These cases leave the image-fill modes behind. See how SVG on a page becomes native Figma vectors and CSS gradients in Figma for the details.

How to check an imported image

1. Select the image layer and open the fill panel. Read the mode: Fill, Fit, Crop or Tile.
2. Compare it with the CSS. cover should read as Fill, contain as Fit, and a repeating background as Tile.
3. If the crop shows the wrong part, compare object-position or background-position with the crop position in Figma.
4. Check the source file's pixel width against the layer width. A 320 px file on a 640 px layer will look soft.
5. If the image has rounded corners or a border, check those separately. Border radius, borders and outlines covers what survives an import.

Conclusion

Fit behaviour carries over because CSS and Figma describe the same few choices: cover, contain, repeat. Resolution is the open question: and it depends on the file the page served and on Figma's 4096 px ceiling. Check the fill mode, then the pixel width, and the rest of an imported image usually follows. If you are importing pages regularly, UnHTML reports what fell back so you know which layers to inspect first.

Frequently Asked Questions

Does object-fit: cover become Fill in Figma?

They describe the same idea. MDN says cover keeps the aspect ratio, fills the whole box and clips the overflow. Figma's Fill mode scales and positions the image to take up the entire layer and may clip it. Open the fill panel after import and confirm the mode on the layer.

Why does an imported image look soft?

A raster is a fixed number of pixels, and it looks grainy when shown larger than its original size. A page may serve a small file to a 1x screen. Figma also scales assets over 4096 x 4096 px down. Check the file the page served, not the CSS.

What is the difference between background-size contain and object-fit contain?

Both fit the whole image without cropping. background-size: contain can tile if the box is larger than the image and background-repeat is not no-repeat. object-fit: contain letterboxes instead.

Can I scale an image in Figma without changing the layer?

No. Figma applies images as fills, so you scale the object the image fills, and the fill mode is kept.