I’m having an issue with images stretching beyond their intrinsic size. I have a portfolio of projects, and each project has a gallery of related photos. So on the Projects Page template, I’ve set up a collection list of Project Images, so I can use a flex list to display them.
For the most part this works really well. Smaller images stay the size they are supposed to, and larger images take up as much space as available. However, some images stretch themselves to fit the width of the container instead of respecting their maximum width. What’s even more confusing, is that they looked exactly how I want them to in the developer, but once I publish they are stretched.
A good example of this is Microsoft Cambridge. The second photo in the list (a man walking down the stairs), looks fine in the editor. But if you look at the live site it’s stretched to the full width of the container.
Is there a way I can fix this??
Here is my site Read-Only: see update 2
It appears one of the critical factors here may be Webflows automatic generation of “Responsive Images.” When I view images that have none of the auto-generated
size parameters, they work fine. Indeed, if I edit the HTML and remove these attributes they work fine.
Is there a way to turn this off, or force Webflow to not create these attributes?
Should this be reported as a bug?
So this was an issue with Webflow’s Responsive images. When I disabled this feature all of my images maintained their correct sizes and loaded exactly as I wanted. Unfortunately, because these are Collection Items, it means I have to disable it for all of my project images, and so can’t use this feature for the majority of the images on my site.
For others who find this issue, use this support article to disable responsive images:
If anyone has a better solution to this problem I would love to hear it. At this time I have disabled my share link and website link.