Resources

Aspect Ratio Image Component for Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Aspect Ratio Image Component for Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Aspect Ratio Image Component for Framer

This is an aspect ratio image component for Framer that gets the aspect ratio of the uploaded image—so your visuals always scale perfectly without getting cropped.

image of Nandi Muzsik
image of David
image of Prianca S.

Created by

Nandi

,

,

and

Comparison of two images in Framer — one cropped and one using aspect ratio component to preserve original proportions
Comparison of two images in Framer — one cropped and one using aspect ratio component to preserve original proportions
Comparison of two images in Framer — one cropped and one using aspect ratio component to preserve original proportions

About the resource

To use the aspect ratio image component, start by uploading your image using the Image property. You can adjust the Radius to round the corners, add a Border to define the edges, and apply Shadows for depth. The Draggable toggle lets you enable or disable drag behavior for the image on your site.

About the resource

To use the aspect ratio image component, start by uploading your image using the Image property. You can adjust the Radius to round the corners, add a Border to define the edges, and apply Shadows for depth. The Draggable toggle lets you enable or disable drag behavior for the image on your site.

About the resource

To use the aspect ratio image component, start by uploading your image using the Image property. You can adjust the Radius to round the corners, add a Border to define the edges, and apply Shadows for depth. The Draggable toggle lets you enable or disable drag behavior for the image on your site.

Framer interface showing "Image Aspect Ratio" component settings, including image upload, border, shadow, radius, and draggable options

The properties of aspect ratio image component in Framer.

Framer interface showing "Image Aspect Ratio" component settings, including image upload, border, shadow, radius, and draggable options

The properties of aspect ratio image component in Framer.

Framer interface showing "Image Aspect Ratio" component settings, including image upload, border, shadow, radius, and draggable options

The properties of aspect ratio image component in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • 3D text graphic reading I Love Framer with wavy distortion effect

    3D Rug Effect for Framer

    Component

    3D text graphic reading I Love Framer with wavy distortion effect

    3D Rug Effect for Framer

    Component

    3D text graphic reading I Love Framer with wavy distortion effect

    3D Rug Effect for Framer

    Component

  • Set Status UI with emoji icons and Be Right Back message

    Set Status Micro-Interaction in Framer

    Component

    Set Status UI with emoji icons and Be Right Back message

    Set Status Micro-Interaction in Framer

    Component

    Set Status UI with emoji icons and Be Right Back message

    Set Status Micro-Interaction in Framer

    Component