One division, and why it is worth automating
Scaling an image without distorting it means keeping the ratio between width and height constant. The arithmetic is trivial — multiply your new width by the original height, divide by the original width — and doing it in your head a dozen times while preparing a batch is where mistakes creep in.
The [msm_tool slug="aspect-ratio"] does that and also reduces the original ratio to its simplest form using the greatest common divisor. That second part is the more useful half: 1920×1080 comes back as 16:9, which tells you something, where 1920:1080 tells you nothing.
Ratio and resolution are different questions
Two images at the same ratio can be wildly different sizes. 640×360 and 3840×2160 are both 16:9.
The ratio answers what shape the image is. Whether it is large enough for its purpose is a separate question, and the two get conflated constantly — "it's 16:9, it'll be fine" says nothing about whether it will look sharp at full width on a retina display.
The ratios that carry expectations
- 16:9 — video, and by extension nearly every embed and thumbnail.
- 4:3 — older screens and photography; still standard for many product images.
- 3:2 — the 35mm frame, and what most cameras still produce.
- 1:1 — avatars, product grids, most social feed posts.
- 1.91:1 — the shape most platforms crop link previews to.
- 21:9 — ultrawide, cinematic.
An unusual ratio is not wrong, but anything that displays your image assumes one of these and will crop toward it. Choosing a shape the destination does not expect means the crop happens somewhere you cannot see.
Rounding, and why the ratio may not survive
There is no such thing as a fractional pixel, so a ratio that does not divide evenly is rounded to the nearest whole number.
The visual difference is nil — less than one pixel. The consequence worth knowing is that the new dimensions may reduce to a slightly different ratio than the original did. 1000×563 is not exactly 16:9; it is as close as whole pixels allow.
That only matters if something downstream is checking the ratio strictly, which is rare but not unheard of on platforms that validate uploads.
Working the other way
This solves from a new width to the matching height. If you know the height you have room for and need the width, that is division rather than multiplication: your height, times the original width, divided by the original height.
One line either way, and it is worth doing rather than eyeballing — a two percent error is invisible on one image and obvious across a grid of twelve.
Upscaling
The arithmetic works in both directions. Enlarging does not.
Making an image larger spreads the pixels it already has over more area; it cannot add detail that was never captured. The calculator will happily tell you that a 400-pixel image becomes 1600×900 at 16:9, and the result will be soft. The number is correct and the outcome is not what you wanted.
Always start from the largest original available.
Where else ratios turn up
Not only images. Video containers, embedded maps, chart panels and card components all benefit from a fixed proportion, and CSS has a property for it — which is a better approach than sizing every container by hand, because it holds at every screen width without a media query.