The Responsive Size Calculator scales an image or any element between two screen sizes. This is exactly the problem you hit when a designer hands you a layout at only two widths — say 1440px and 425px — and you need every size in between. Enter the width and height at your smallest and largest screen, and the tool works out the size at every breakpoint for you.
You get two kinds of output: a single fluid CSS clamp() value that scales smoothly across all widths with no media queries, and an exact size for each breakpoint you list — copyable as clamp(), as desktop-first CSS media queries, or as JSON for component props. Everything runs in your browser.
How to calculate responsive sizes
- Enter the screen width, element width, and element height for your smallest layout (for example, 425px).
- Enter the same three values for your largest layout (for example, 1440px).
- List the breakpoints you want sizes for, and choose whether to lock the aspect ratio.
- Read the per-breakpoint table, then copy the clamp(), CSS, or JSON output.
How the sizes are calculated
Between your two anchor screens, the tool uses linear interpolation: at any breakpoint it finds how far along you are between the small and large screen (a value from 0 to 1) and applies that same fraction to the width and height. So a breakpoint exactly halfway between your anchors gets a size exactly halfway between your two sizes.
For breakpoints outside your two anchors — such as 375px or 320px when your smallest anchor is 425px — the value is held at the nearest anchor size by default (clamped), so it never scales down to something unusably small. Turn on “Extrapolate” if you want the line to keep going instead.
Lock aspect ratio vs. independent scaling
With the aspect ratio locked, the height is always derived from the width using your large-screen ratio, so the element keeps its exact proportions at every breakpoint — the safest choice for images, since it prevents stretching or squashing.
With it unlocked, width and height interpolate independently. This is useful for art-directed layouts where the crop is deliberately a different shape on mobile than on desktop, and you want the shape to morph smoothly between the two.
clamp() or breakpoints — which should you use?
A single clamp() value is the modern approach: it scales fluidly across every width with no media queries, and with a locked ratio it pairs with aspect-ratio so the height follows automatically. Use the discrete breakpoint table when your framework or component system sets explicit sizes per breakpoint rather than accepting a CSS clamp() expression.
Frequently Asked Questions
What problem does this solve?
When a designer only provides a layout at two screen widths, you still need the correct element sizes at every other breakpoint. This tool interpolates those sizes for you instead of you calculating each one by hand.
How are the in-between sizes worked out?
By linear interpolation between your two anchor sizes. At each breakpoint the tool finds the fraction of the way between your small and large screen and applies it to the width and height.
What happens to breakpoints smaller than my minimum screen?
By default they are clamped to your minimum size so they never shrink too far. If you enable “Extrapolate”, the tool continues the trend line below the minimum instead.
Will the aspect ratio be preserved?
If you lock the aspect ratio, yes — height is always derived from width using your large-screen ratio, so proportions stay exact at every breakpoint. Unlock it only if you want the shape to change between screens on purpose.
Should I use the clamp() output or the breakpoint sizes?
Prefer the clamp() value where you can — it scales smoothly with no media queries. Use the discrete per-breakpoint sizes when your setup needs a fixed value at each breakpoint, such as component props or a framework that does not accept clamp().