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:

1 Like

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!

1 Like

That works! Thanks so much, Josh!

1 Like

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

Thank you also from my part, as I had the same problem and your advice helped!

1 Like

Hey @drtr I seem to be having a similar problem with an image shrinking. I’ve set the image to 100% width/height and its fill to ‘cover’. It looks fine in webflow’s preview, but when I look at the published version, the image in the first column of my “True collaboration” section seems to shrink on mobile portrait.

Any chance you could point me in the right direction?
https://preview.webflow.com/preview/paradigm-02b5a5?utm_medium=preview_link&utm_source=designer&utm_content=paradigm-02b5a5&preview=a31b2ad0a537f98ad22df5f7736701a0&workflow=preview

Thanks in advance!

Hey Rachel! Sure - i’d be happy to help.

This is a really interesting one. After looking at the read-only link, it looks like all of your Images in the True Collaboration section share the same class/stylings, so it’s weird that the “Share Team Assets” image is smaller on the published site :thinking:

It might have been caused by some weird behaviour in the Symbols, or maybe there’s something I am missing deeper in the Stylings. Whenever I experience something like this, my first point-of-call is to replace the “broken” element with a new one (by duplicating a working element and then overriding the content). So I reckon your best option would be to try copy/pasting a working Symbol/Image (e.g. “Reuse Components”), and then replace the Images using Symbol overrides. Sometimes starting from scratch with a fresh instance is the easiest option :sweat_smile:

Here’s a quick screen recording of the steps. (Just make sure you remember to republish your site after trying it too!): [Screen Recording] - Paradigm Duplicate + Override

Let me know how this goes after republishing! And if this doesn’t solve it, could you pass me over a direct link to the published page so I could check out the source code in more detail as well? :male_detective: