Framer Update, Layout & Design

Framer Update: Fit Image

2:35

9.2K views

Sep 17, 2025

About this lesson

Introducing Fit Image, a new sizing option unique to Framer. In most design tools, images have a fixed width and height you set on the canvas, which means you need to match the aspect ratio of your frame to the image source. That stops working when dealing with dynamic content, like our CMS. Fit Image solves this by adapting automatically to the width or height of uploaded images, opening up new layouts, responsive design possibilities, and future interactions. Only in Framer. https://framer.com/updates/fit-image

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Introducing fit image, a brand new 0:03sizing option for your images in Framer.0:07Typically in any design tool like 0:10Framer, your images will have either a 0:13fixed or a relative height. The catch 0:16here is that the width and the height 0:18and the resulting aspect ratio you have 0:21to define upfront on the canvas. And 0:25this does not work with any dynamic 0:28content like when designing a CMS 0:31gallery where essentially you're forced 0:34to use images with the same size. This 0:37is why we're adding a new sizing option 0:40designed for images. It's called fit 0:44image. And here as I apply it to the 0:47height, notice how the size of all 0:50images here update to match the aspect 0:53ratio of the image source. This makes it 0:56so much easier to design any layout 0:59using images in Framer as we can now 1:02copy a new image here, paste it on top,1:07and the sizing will adapt automatically 1:10without us having to do anything. This 1:13lets you design all new layouts directly 1:16in Framer and it makes working with and 1:19iterating using images much more fun and 1:23faster. All I have to do is copy and 1:26paste and Framer gives me responsive 1:29images that maintain their true aspect 1:32ratio. Now, as mentioned before, where 1:36this will make the biggest difference is 1:39on pages using the framer CMS. As when 1:43you're dealing with a collection list,1:46your images repeat and thus they all get 1:49the same size. As you can see on this 1:52demo, I'm using the CMS. It has all my 1:56content and images. And here, making all 2:00images respect their own aspect ratio is 2:03now a single click. This new sizing 2:07option makes working with images across 2:10the board so much better. We're super 2:14excited about this new feature and what 2:16it unlocks in the future. Thank you so 2:19much for watching and stay tuned for 2:22more updates coming soon.

TeachesSizing

Also coversCMS Pages / Dynamic Content Collection Lists Collections Responsive Design

Watch on YouTube ↗

‹ Animating transitions between pages in Framer (Animation Lesson 14)

Introducing Design Pages ›