---
title: "Proportional Scale — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Tushar · Interactive. Scale HTML like you scale images"
canonical: "https://framer.elliotli.dev/component/proportional-scale"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Proportional Scale

# Proportional Scale

Scale HTML like you scale images

[View on Framer](https://framer.com/marketplace/components/proportional-scale/?via=elliot-li)

![Proportional Scale preview image 1](https://framer.elliotli.dev/og/component/proportional-scale/bc27060cc1efb736/1600x900.jpg)

## Summary

Scale HTML like you scale images

## Description

## When you create and animate a component in Framer, it does not scale properly with its parent container??

### Even if you:

-   Set width to _Fill_
    
-   Use constraints
    

👉 Scaling based on the parent width often **breaks your animation and layout**.

### ⚠️ The Problem

-   Animations distort when resized
    
-   There is no native functionality that allows html elements to be scaled like how we scale images
    
-   Layout proportions get messed up
    
-   Responsive behavior is inconsistent
    

Framer doesn’t provide true **proportional scaling for animated components**.

### ✅ The Solution

Our Component fixes this.

You can:

1.  Design and animate your component normally in Framer
    
2.  Wrap it inside our component
    
3.  Done, now the html/framer component scales like how images scale (Fit Property most likely)
    

👉 Your animation will **scale perfectly without breaking**

## Rank history [How rankings work →](/terms#rankings)

-   All · #6745

## Details

- **Author**: Tushar
- **Price**: $5.00
- **Published**: 2026-06-02
- **Updated**: 2026-06-18
- **Added**: 2026-05-20
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase