Streaming live at 10am (PST)

Help with object-fit and image containment for thumbnail images

Hi, I am brand new to webflow and have before only had experience hand-coding websites so I apologize if this is a stupid question. I am building a portfolio website for myself, and I want to have my project links featured as thumbnail images that span the width of the screen like on this site: [Daniel Danielsson - Creative & Motion - Work]

I started by creating a section with a container and putting an image within the container, then essentially cropping the image with the container height. The image is set to fit: cover. The issue I am trying to solve is how I can stop the image from re-scaling when the browser size changes, so that the thumbnail always looks the same. I do not want to crop every image to the exact height of the thumbnail in case I want to change the sizing down the line.

I might be going about this entirely the wrong way, so any help would be much appreciated! Thank you in advance.

EDIT: I figured out a solution by changing the container height to vw units and changing the image height to the same value in vw units so they both scale the same way.


Here is my site Read-Only: [Webflow - My Portfolio Website]LINK
(how to share your site Read-Only link)

hi @Martini and welcome, only difference between Webflow and developing by code is that you do not need for these simple tasks write any or just little of custom code. You can benefit from your hand-coding experience as Webflow is for task like that fairly simple, don’t be shy to discover Webflow power and its GUI. If something isn’t clear feel free to visit Webflow University. I used it too and it can clarify some queastions you may have.