Images Stretching after Publish

Design help General
6

What might help is telling us what you want to happen.

My apologies I thought I made that clear. I don’t want them to stretch at all. Zero stretching.

If the image is wider than 1200px, then it should be scaled down to fit. If it is smaller it should be centered. If two can fit on one line (2 images <= 600px width) then they should fit on the same line (on desktop and tablet).

Also responsive images do not apply to collection items at all.

Well disabling this feature did fix the issue. With this option checked for the images, it generates HTML for the <img> element that includes srcset and sizes attributes. When it’s disabled, it no longer does this:

With Responsive Image checked, it publishes an element like this:

<img
src="https://uploads-ssl.webflow.com/abc/abc_Martignetti_3.jpg" 
srcset="
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3-p-500.jpeg 500w,
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3-p-800.jpeg 800w,
  https://uploads-ssl.webflow.com/abc/abc_Martignetti_3.jpg 2500w
"
sizes="(max-width: 479px) 41vw, (max-width: 767px) 39vw, (max-width: 991px) 19vw, 20vw"
alt=""
>

Which to me looks like a responsive image. If I disable this feature I get a basic <img> element:

<img
  src="https://uploads-ssl.webflow.com/abc/abc_Chao_Center_3.jpg"
  alt="Chao Center Stairs 1"
  class="project-image"
>