How do I fit an image inside a box in Webflow?

Size the parent, then the image

Fit controls how an image sits inside a box that already has a size. Webflow's steps are specific. Set a width and a height on the parent, such as a box or div block. Select the image inside that parent and set its width and height to 100 percent. Then test Fit.

Open Style panel, Size, on the image. Fit lists five options: fill, contain, cover, none, and scale down. Try them on the same photo and keep the one that shows the subject the way you want. The canvas previews the choice. Visitors see it after you publish.

The parent must have a width and a height. Every Fit option fits content inside a parent, but Fit itself is set on the child. A parent that is still sizing itself only from the photo gives the control nothing fixed to fit into.

Example: a team photo should sit in a square beside a name. Select the box, set its width and height, set the image to 100 percent in both directions, then try the Fit options until the face stays in the square.

Use cover when the photo should scale to a ratio

If you have already set the image proportions and you want a ratio, Webflow says to set Fit to cover so the image scales properly. Aspect ratio can size the box: square is one of the ratios, and custom lets you enter your own width and height values. A set width and height take precedence over the ratio if you have set both.

To help the element keep that ratio when content would spill, set Overflow to hidden. Hidden overflow hides what falls outside the box. Check that a face or a product is not cut off in a way you did not want.

The width and height guide is the Size fields for width, height, min, and max. Use those when the box itself is the question. Use this page when the photo inside the box is the question.

A circle crop is the same idea with a radius. The border guide sets an equal width and height, a 50 percent radius, hidden overflow, and fit cover. Start from a sized box here, then add the radius only if you want the round frame.

Fit is not a background image

An image element and a background image are different tools. Fit lives in the Size section. A background image, gradient, or color is added in Backgrounds, and a background image has its own size, position, and tile settings. Media elements are the exception that cannot take a background.

Use an image element plus Fit when the photo is the content, such as a portrait, a product, or a logo that must stay inside a frame. Use a background when the photo sits behind other content. The background image guide is that path. Putting Fit on the section will not crop a background the way it crops an image element.

If the picture is only decorative, a background can be the simpler choice. If a visitor should see a particular face inside a fixed frame, stay with the image element, the sized parent, and Fit.

Check a narrow width before you publish

A parent with a pixel width that looks right on desktop can be wider than a phone. Webflow also notes that percentage sizes can collapse in Safari when no parent has a fixed pixel size. Give at least one parent a real size, then check the frame on a smaller canvas.

Select the phone breakpoint, select the parent, and confirm its width still fits. Then select the image and confirm it is still 100 percent wide and 100 percent tall, with the Fit option you chose. A Fit value set on desktop is still there unless you override it on the smaller breakpoint.

Publish, and open the live page. Look at the square on a wide window and on a phone. If the subject is cut off, try another Fit option on the image and publish again. If the whole page scrolls sideways, the parent is still too wide. Fix the parent size before you keep tuning Fit.

Fitting a photo into a frame you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.