askvity

How to Make an Image Square in Elementor

Published in Elementor Image Styling 4 mins read

To make an image square in Elementor, the most effective method is to place the image within a square container and use Custom CSS with the object-fit: cover property to ensure the image fills the container without distortion.

Images come in various aspect ratios (rectangular, square, etc.), but sometimes you need them to fit perfectly into a square space on your Elementor page for design consistency, such as in galleries, testimonials, or team member sections. Simply resizing a rectangular image into a square space would stretch or compress it, making it look unnatural.

This is where the CSS property object-fit: cover becomes crucial. As mentioned in the reference, setting object-fit to cover prevents the image from being "unnaturally stretched" and instead "keeps its natural proportions" by scaling it to fill the container while potentially cropping parts of the image that don't fit the container's aspect ratio.

Method: Using Custom CSS and object-fit: cover

This approach involves two main steps: creating a square area and then making the image within that area fill it correctly.

  1. Create a Square Container:

    • You can use a Section, Column, or Inner Section widget.
    • Go to the Advanced tab of your chosen container widget.
    • Under Layout or Custom Positioning, set a fixed Width and Height. Ensure both values are the same (e.g., 200px by 200px). Alternatively, you can use percentage padding on the container to create a responsive square based on width (e.g., set width to 100% and padding-top to 100%).

  2. Add the Image Widget and Apply Custom CSS:

    • Drag an Image widget into your square container.
    • Upload or select your desired image.
    • Go to the Advanced tab of the Image widget.
    • Scroll down to the Custom CSS section.
    • Add the following CSS code:
selector img {
    width: 100%; /* Make image fill the container width */
    height: 100%; /* Make image fill the container height */
    object-fit: cover; /* Scale image to cover container while maintaining aspect ratio */
}
*   **Explanation of the CSS:**
    *   `selector img`: This targets the actual `<img>` element within the Image widget.
    *   `width: 100%;` and `height: 100%;`: This tells the image to take up the full dimensions of its parent container (which you've made square).
    *   `object-fit: cover;`: This is the key property. It tells the image how to resize itself to fit the container. `cover` means the image will maintain its aspect ratio while filling the container's entire area. The image will be clipped to fit if its aspect ratio doesn't match the container's. This is precisely what the reference describes – avoiding stretching and keeping proportions.

This method ensures that regardless of the original image's dimensions, it will neatly fit into your defined square space without looking distorted.

Alternative Considerations:

While the object-fit: cover method is generally the most flexible, Elementor sometimes offers widget-specific controls:

  • Gallery or Posts Widgets (Pro): Some advanced widgets like the Pro Gallery or Posts widgets might have built-in options for image aspect ratio or size that can help achieve a square layout for multiple images. However, for a single image using the standard Image widget, Custom CSS is the most direct way to apply object-fit: cover.
Method Pros Cons Best For
Custom CSS + object-fit Precise control, prevents distortion, works on standard Image widget Requires adding CSS Single images, consistent layouts
Widget-Specific Settings Easy if available, no code needed Limited to certain widgets, less flexible Galleries or post grids with built-in opts

By using the Custom CSS approach with object-fit: cover on an image inside a square container, you effectively make your image appear square within the layout while preserving its visual integrity.

Related Articles