43
$\begingroup$

I have an image that is:

320 original width
407 original height

I want to let users resize the image via a form I am building on a webpage. They can adjust either the width or height. When they do the other dimension should auto adjust to maintain the aspect ratio.

When a user updates the width field I get the adjusted height like so:

aspect ratio = original width ÷ original height
adjusted height = <user chosen width> ÷ aspect ratio

Is this correct?

Also how to get the adjusted width when the user changes the height field? I know it should be simple enough but I just can't figure it out.

$\endgroup$

4 Answers 4

Reset to default
56
$\begingroup$

Yes, this is correct – though it unnecessarily uses two divisions instead of one division and a multiplication, adjusted height = <user-chosen width> * original height / original width.

The corresponding formula for the adjusted width is adjusted width = <user-chosen height> * original width / original height, or if you want to do it your way, adjusted width = <user-chosen height> * aspect ratio, with aspect ratio calculated as before.

$\endgroup$
2
  • $\begingroup$ perfect, thanks. $\endgroup$
    – JakeRow123
    Aug 9, 2012 at 19:43
  • $\begingroup$ Thanks @joriki Really Helpful. $\endgroup$
    – Dinesh Bhojvani
    Feb 28, 2019 at 13:27
18
$\begingroup$

Yes. You said you want the aspect ratio of the adjusted image to be the same as the aspect ratio of the original equation, so you want

$\frac{\text{adjusted width}}{\text{adjusted height}} = \frac{\text{original width}}{\text{original height}}$

Multiplying both sides of the equation by the adjusted height, you get

$\text{adjusted width} = \frac{\text{original width}}{\text{original height}} \cdot \text{adjusted height}$

Then, dividing both sides of the equation by $\frac{\text{original width}}{\text{original height}}$, you get

$\text{adjusted width } / \frac{\text{original width}}{\text{original height}} = \text{adjusted height},$

which is the formula you suggested!

So, how do you get the adjusted width when the user adjusts the height field? The answer is hidden in the reasoning above! Can you find it?

$\endgroup$
5
$\begingroup$

Yes, this is the formula: Aspect Ratio = Width / Height for example:

  • Width = 300

    - Height = 150

  • Aspect Ratio = 2/1 (or 2:1)

if we want to calculate new object size, you need to have a new object dimension like height, or width to calculate remaining one preserving aspect ratio. let's say we have:

  • New Height = 300

    - Aspect Ratio = 2/1

  • New Width = ? Knowing that, or fractions should look like that: 300 / New Width = 2 / 1 => New Width = 150 Or you can calculate your new measurements using this online aspect ratio calculator that do the job for you and can calculate: aspect ratio, number of pixels (if is image) and new dimensions for objects or images keeping its aspect ratio.

$\endgroup$
2
  • $\begingroup$ The url to the online calculator has changed to: ninjaunits.com/calculators/aspect-ratio $\endgroup$
    – Jeff Galbraith
    Aug 17, 2018 at 12:58
  • $\begingroup$ I might be being daft, but if the original aspect ratio was 2/1, and the height is adjusted to 300 (from 150), then it seems to me that the width should be adjusted to 600, not 150, in order to maintain width/height = 2/1, I don't understand why you're adjusting to 150 here. $\endgroup$
    – baxx
    Apr 8, 2021 at 9:19
0
$\begingroup$

Given:

  • Original Height (h0) = 400.
  • Original Width (w0) = 300.
  • User enters New Height (h1) as 200.

Calculate new Width (w1). aspect ratio = 400/300 = 1.3333 Therefore new width = 200 / 1.3333 = 150

Another way of looking at it is, aspect ratio =4:3. So (200/4)*3 = 150

$\endgroup$

Not the answer you're looking for? Browse other questions tagged or ask your own question.