How to Make an Image Square in Webflow (Responsively)

Whether you're working on a portfolio grid, team section, or gallery, consistent image shapes matter — and square images often offer the best layout control.

But here's the catch: Webflow doesn’t have a native "square image" setting.
Instead, you’ll need to use a simple layout trick that keeps the image perfectly square — no matter the screen size.

Let’s walk through it together.

Step 1: Add a Div Block as a Wrapper

Start by dragging a Div Block onto your canvas. This will act as a container for the image.

Name it something like ImageWrapper to keep things organized.

Step 2: Make the Wrapper Square

To create a square shape, use this classic trick:

• Set the width to 100% (or a fixed value like 200px).
• Set the padding-bottom to 100%.

👉 This creates a responsive square based on the width, thanks to how CSS calculates vertical padding as a percentage of width.

Also set:

• Position: Relative (you’ll need this in the next step)
• Optional: Overflow: Hidden if you want to crop overflowing images.

Step 3: Place the Image Inside

Drag your Image element inside the square wrapper. Then:

• Set the image to:
  • Position: Absolute
  • Top: 0, Left: 0
  • Width: 100%
  • Height: 100%
  • Object-fit: Cover

This ensures the image fills the square while maintaining aspect ratio. No distortion, no stretching.

Step 4: Adjust for CMS or Dynamic Content

Using a CMS Collection? Follow the same setup:

• Wrap your Image field in a Div Block.
• Use the same styling rules as above.

This is especially useful for:

• Blog post thumbnails.
• Product images.
• Team bios and avatars.

Step 5: Check Responsiveness Across Breakpoints

Because the square is based on padding-bottom: 100%, it remains square on any screen. But always check:

• Desktop
• Tablet
• Mobile landscape & portrait

If needed, adjust max-width or add media-specific tweaks for better performance.

Automate Image Workflows with Gapflow

Creating square images manually is easy — but uploading dozens of them isn’t. That’s where Gapflow steps in.

Use Gapflow to:

• Bulk upload images directly to your Webflow CMS via API.
• Sync image URLs from Airtable or Google Sheets into the correct fields.
• Predefine wrapper structures so your team can reuse square containers across projects.

Especially helpful for:

• Portfolio-heavy sites
• Image galleries
• Ecommerce product grids

Less grunt work. More creative time.

Common Pitfalls to Avoid

• Using fixed height/width: Doesn’t scale well across devices.
• Skipping object-fit: cover: This will leave your images stretched or squished.
• No position: absolute on image: It won't fill the container correctly.

Stick to the layout pattern, and you're good.

Conclusion

Square images in Webflow are all about layout control.
By wrapping your image in a padding-bottom: 100% container and applying the right styles, you can create clean, responsive, and reusable square image blocks.

Want to scale this across projects or update 50+ CMS items in seconds?
👉 Try Gapflow — your automation ally for everything Webflow.

‍