Using images with unique aspect ratios in the CMS

By default, Frames in Framer can have a locked aspect ratio. For instance, you can create a Frame within a Stack sized at 400 × 300 pixels and lock the 4:3 aspect ratio using the lock icon next to the sizing properties. When you set the “Width” property to “Fill”, the height adjusts automatically to maintain the locked ratio.

If you use a locked aspect ratio in a collection list, all CMS images will inherit the same ratio, ensuring a consistent layout. For images with unique aspect ratios, you can use the image component from this demo project. This setup allows each image to display with its original proportions, even when uploaded to a collection.

The demo project shows how to configure the image component for CMS use, enabling images to maintain their unique ratios. This feature also works seamlessly in overlays, providing flexibility across your project.

By following these steps, you can enhance your Framer project with visually appealing and proportionally accurate images.