How To Correctly Size An Image Box On Webflow

Quick summary

Sizing an image box in Webflow can be done by dragging the corner edge for quick adjustments or by entering exact values in the Style tab for pixel-perfect control. Both methods let you set precise dimensions using units like PX or % directly inside the Webflow Designer.

Steps

1. Open the Assets tab from the left sidebar menu to insert an image, or add an Image block — both methods are identical.
2. Drag and drop your chosen image from the Assets panel to the desired location on the canvas.
3. With the image placed, begin resizing it by dragging its corner edge to shrink or expand it visually.
4. Hold and drag the corner to shrink or expand the image to your approximate desired size.
5. Confirm the image has been resized to your desired dimensions using the drag method.
6. For more accurate sizing, open the Style tab in the right sidebar, locate the Size section, and adjust the values and units.
7. Enter the exact value for your chosen unit in the Size field and press Enter to apply.
8. Click on the unit selector to switch between units such as PX, %, and others to finalize your image dimensions.