Scale background images as the grid scales

Design help Layout & Design
1

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!!

Screenshot 2023-02-20 at 17.00.56
Screenshot 2023-02-20 at 17.00.561920×990 126 KB

Here is my site Read-Only: Webflow - PAV Styleguide for Webflow

2

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.

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!

3

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

1 Like