Image Shrinking

Hello!

I have an image in a column, and the size of the image is fine around 1440 px but when the size of the browser gets any smaller, the image shrinks. How can we set it up so that when the browser is smaller than 1440 px, the image doesn’t shrink but instead the image is the same size and the part of the image that is too large just goes off screen. Hope that makes sense!

Attached are the images. Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Remi,

Did you set the resolution of the image manually, or is it still set to auto? My understanding is that it’s best practice to set the width/height of your image to be 100% and then use the parent container + image fill options to get the result you’re looking for.

If you can set up a read-only share link to your project then we can have a look at the specifics of your project to help you get this sorted :blush:

Thanks, Josh! I knew I forgot something :sweat: Here’s the read only link: Webflow - AllVoices

You’ll see the image from the screenshot when you scroll down and see the section that says “Talking To People Is Tough. AllVoices Makes It Easier.”

Thank you!

No worries!

To fix this, select your image and set a height/width to 100%. Then set an Image fill option (“cover” is probably best in this instance). This keeps the image at full height across all resolutions/breakpoints where the image is visible and stops it from shrinking :raised_hands::raised_hands::raised_hands:

Hope this answers your question!

That works! Thanks so much, Josh!

1 Like

Not a problem Remi! Glad I could help :tada: