Scale background images as the grid scales

[PAV-TM (Olga Rabo)]

Hi! I’m struggling a bit to understand how to scale my images as the grid gets bigger across viewports.

I’m using a CMS collection, where the image is essentially a div with a background image set to “cover”… I tried poking around (e.g. setting the width and height to 100%) but nothing’s achieving a desired effect. What I want to achieve is that the image scales and takes full width of the grid, while remaining square across all devices (like I drew on the screenshot… which is what I can’t achieve)

Sounds simple enough but can’t seem to understand how to do this?? Appreciate any tips!!

---

Here is my site Read-Only: https://preview.webflow.com/preview/pav-styleguide-for-webflow?utm_medium=preview_link&utm_source=designer&utm_content=pav-styleguide-for-webflow&preview=a8104c885881c6e4b300f19cd9aeaa7a&pageId=63e35eb82a73c8334e9a7d66&workflow=preview

[Rachel_Kreutzkamp]

Hi Olga,
There’s a trick to making a square in css, but it works best to apply it to a parent element of an image if you want to make sure the image fills to each edge while maintaining its original aspect ratio. So in your case I would apply these settings to a div that contains your image.

A Perfect Square with CSS

Here’s a loom of me making those changes:

(I also edited your ‘speaker-item’ to wrap its children in a vertical flexbox)

Let me know if you have any questions, I’d be happy to help!

[PAV-TM (Olga Rabo)]

You are amazing, a simple and straightforward solution! Thanks so much!!