Framer supports both consistent image layouts and images with unique aspect ratios. Depending on how your collection list is configured, you can either maintain a uniform ratio for all CMS images or preserve each image’s original proportions.
By default, Frames in Framer can use a locked aspect ratio. For example, you might create a Frame that is 400 × 300 pixels and lock it to a 4:3 ratio using the aspect ratio lock next to the sizing properties.
When the Frame’s Width is set to Fill, the height automatically adjusts to maintain the locked ratio.
If you use a Frame with a locked aspect ratio inside a Collection List, all CMS images will be displayed using the same ratio. This creates a consistent and predictable layout across your collection.
If your CMS contains images with different dimensions and aspect ratios, you can use a custom image component designed to preserve each image’s original proportions.
This approach allows images to:
Retain their original aspect ratios.
Display correctly within Collection Lists.
Adapt automatically to different image dimensions.
Work inside overlays and other dynamic layouts.
Open the demo project that includes the custom image component.
Copy the image component into your project.
Connect the component to your CMS image field.
Use the component inside your Collection List instead of a standard image layer.
Once connected, each CMS image will display using its original dimensions rather than being constrained to a shared aspect ratio.
A fixed aspect ratio is often the best choice when you want a consistent visual layout, such as:
Blog post thumbnails
Team member photos
Product grids
Portfolio galleries
Using a locked ratio ensures all items align neatly regardless of the source image dimensions.