CMS
Jul 10, 2025
How to Naturally Display Images with Different Ratios in CMS
Let me show you how to naturally display images of various ratios using Framer. By utilizing fixed aspect ratios and image components from the CMS collection, you can maintain a consistent layout.
Uploaded by
Translated by
Contents
Table of Contents
This document was created to help domestic users who are learning Framer and having trouble due to the lack of Korean resources. It includes translations of content from the official blog along with additional practical information. We hope it will be of help to those using Framer.
How to Lock the Aspect Ratio in a Frame
Create a frame with a 400×300px size, and click the aspect ratio lock icon to maintain a 4:3 ratio.
When the ratio is locked and you set the Width to Fill, the height automatically adjusts to match the width, ensuring a 4:3 ratio is always maintained.
Note: When using a fixed aspect ratio in the CMS collection list, all CMS images inherit the same ratio, maintaining a consistent layout.
How to Use Images with Various Aspect Ratios
If each image has a unique aspect ratio, consider using the image component from the Framer Demo Project.
Upload images to Framer's CMS collection
Use the Image component provided in the Demo Project
The components in the demo project are set up to display different aspect ratios within the CMS collection while preserving the original aspect ratios of the images.
This article is a translation and adaptation of the Framer official blog post ‘Using images with unique aspect ratios in the CMS’.
