Using images with unique aspect ratios in the CMS

By default, Frames in Framer can have a locked aspect ratio. For example, you can create a Frame within a Stack that is 400 by 300 pixels, then lock the aspect ratio using the lock icon next to the sizing properties. This ensures that the aspect ratio remains 4:3. When you set the Width property to Fill, the height is automatically calculated to maintain the locked aspect ratio.

When you use a layer with a locked aspect ratio in a Collection List, all images from the CMS will inherit the same aspect ratio. This is useful for maintaining a consistent layout. However, if you prefer to use images with unique aspect ratios, you can do so by utilizing the Image component from this demo project.

The project above shows how to set up the Image component within the CMS, allowing each image to retain its original aspect ratio. You can upload any image to your Collection, and it will display with its unique proportions. This feature also works within Overlays, ensuring flexibility across different components of your project.

By following these steps, you can ensure that your CMS images maintain their unique aspect ratios, enhancing the visual appeal and flexibility of your Framer projects.