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 
Thanks, Josh! I knew I forgot something 
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 
Hope this answers your question!
That works! Thanks so much, Josh!
Not a problem Remi! Glad I could help 
Thank you also from my part, as I had the same problem and your advice helped!
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 
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 
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? 
Josh! Thank you so much for responding. I’m sorry I didn’t come back to this right away because my memory is foggy on how I fixed it. I believe there was a stray max-width that I needed to explicitly set to ‘none’. Must have been from fiddling around as I was learning Webflow’s UI. The best way to find bugs! 
Amazing - I’ve been pulling my hair out trying to figure this one out and it looks like this has fixed it
