# How to Make an Image Square in Webflow

.webp)

**TLDR:**

To make an image square in Webflow, either set equal width/height with object-fit: cover, or use a div with padding-bottom: 100% and a background image. If your layout includes forms next to images, use Gapflow to automate routing, filter spam, send confirmations, and export leads — no code required.

Designing with consistency in Webflow often means keeping elements — like images — uniform in shape and size. Want your images to always appear square, no matter their original aspect ratio?

This quick guide shows you exactly **how to make an image square in Webflow**, step-by-step, and explains how **Gapflow** ensures that your forms (often placed next to images or inside image-heavy layouts) work reliably — with automation, filtering, and backups.

## 🖼️ Why Use Square Images in Webflow?

Using square images helps:

- Maintain a **clean, balanced layout**
- Create consistent image grids or galleries
- Prevent layout shifts on responsive screens
- Improve visual branding (e.g. for team member bios, products, or blog thumbnails)

## ✅ How to Make an Image Square in Webflow (2 Methods)

### 🔹 **Method 1: Set a Fixed Width and Height**

1. Select the Image element in the Webflow Designer
2. Go to the **Style Panel**
3. Set both `Width` and `Height` to the same value (e.g. `300px`)
4. Add `object-fit: cover` under the **Style Panel > Layout > Image Settings**  
   - This ensures the image fills the square without distortion

### 🔹 **Method 2: Use a Square Div with Background Image**

This gives you more control and is better for responsive design.

1. Drag in a `Div Block`
2. Set the `width` to `100%` or a fixed pixel value
3. Set the `padding-bottom` to `100%`  
   - This forces the div into a square using aspect ratio trick
4. Set the image as a **background image** in the Style panel
5. Use `background-size: cover` and `background-position: center`

✅ **Best for grids**, image cards, or team profiles.

### ✏️ Tip: Use Classes

Apply reusable classes to style all square images consistently — across cards, CMS items, and different breakpoints.

## 🚀 Bonus: Placing Forms Near Images? Use Gapflow to Keep Them Smart and Secure

If you're using image cards to link to forms (like “Apply Now”, “Contact”, or “Get a Quote”), there’s a risk users interact with a broken or misrouted form.

**Gapflow.io** ensures that **all forms across your site — including those in image-rich layouts — are fully functional and secure**.

### ✅ Gapflow Features That Support Form Reliability on Visual Pages:

#### 📬 **Smart Mail Routing**

Automatically route form submissions based on their context — even if the form is hidden in a card or popup.

#### 🤖 **AI Spam Filtering**

Image-heavy pages often attract bots. Gapflow’s AI filters them out before they ever hit your inbox.

#### 📩 **Autoreplies**

Confirm every submission — perfect for forms under product images or team bios.

#### 🧠 **AI Field Mapping**

Using Webflow CMS to generate image cards + forms with unique IDs? Gapflow still detects and organizes form data accurately.

#### ✉️ **Submission Subject Customization**

Easily identify which form submission came from which section — useful when forms are placed below different images or categories.

#### 📊 **CSV Lead Export**

Track form submissions across all your image-heavy landing pages — and export them anytime.

#### ⚙️ **Works With All Webflow Forms**

It doesn't matter where or how your form is placed (card layout, gallery section, etc.) — Gapflow catches every submission.

#### ⏱️ **Quick Setup**

Integrate with Webflow in just a couple of minutes — zero coding required.

## 🧠 Final Thoughts: Square Images + Functional Forms = Professional Design

Making an image square in Webflow is simple with the right technique.

But don’t forget: image-heavy layouts often hide forms — and **those forms need to be reliable**.

With **Gapflow**, you get:

- Automated routing
- AI spam filtering
- Instant autoreplies
- Form backups and exports

…so you can focus on visual design, while Gapflow handles the backend form logic — across your entire Webflow project.