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