Preserving image sizing

Hi, I’ve been struggling with this all afternoon so could do with some help. I’m uploading some images in a horizontal row to my portfolio website. The point is to show that I designed for different screen sizes. I have exported each screen mockup from figma, and uploaded it as an image to webflow. I have put the images each inside a div block, they seem to behave better that way (otherwise they stretch - I think thats because of the flexbox I have put on the div container.) What I want is to show the different screen sizes next to each other, preserving their proportions like in my figma file. I can get it to work temporarily, but then the sizes jump up to different ones and the proportions go wrong. Here’s how they should look, a screenshot from my Figma file.

NOTE - I have set the relevant div (mockups div) to hidden on the site because Ive shared it with people - hopefully you can see the layer in read only mode?


Here’s a link to the page on the site - the mockups are towards the end.

which page are you referring to in your site?

Hey thanks for the response! New to this - ive just updated the link in my original post. The page is the Candor Website page. The set of mockups are quite far down in the designs section.