# Calculate width and height of a rectangle, given its diagonal and ratio

Well, I know, it's easy. We did it in class some time ago and I forgot it, I'm stupid because I can't figure it out:

E.g. I have a 32" TV with 16:9 ratio and I want to know its width and height.

I'd like to know the whole derivation so I can understand it (again) ...

• You use the Pythagorean theorem like so: your diagonal's 32 inches and you know the aspect ratio of your legs; that nets you $(16x)^2+(9x)^2=(32)^2$... Commented Sep 11, 2011 at 20:59
– Erik
Commented Sep 11, 2011 at 21:20

Suppose that the unknown width and height are $x$ and $y$, and you’re given a diagonal $d$ and a ratio $m:n$ of width to height. That ratio means that the width is $\frac{m}{n}$ times the height, so you know that $x=\frac{m}{n}y$. You get a second relationship between $x$ and $y$ from the Pythagorean theorem: $x$, $y$, and $d$ are the lengths of the two legs and the hypotenuse of a right triangle, so $x^2+y^2=d^2$.

Now substitute $\frac{m}{n}y$ for $x$ in this second equation to get $\displaystyle\left(\frac{m}{n}y\right)^2 + y^2 = d^2$. Simplifying this, you get in turn: $$\frac{m^2}{n^2}y^2 + y^2 = d^2,$$ $$\left(\frac{m^2}{n^2}+1\right)y^2 = d^2,$$ $$\left(\frac{m^2+n^2}{n^2}\right)y^2=d^2,$$ and $$(m^2+n^2)y^2=d^2n^2.$$ Finally, solve for $y$: $\displaystyle y^2 = \frac{d^2n^2}{m^2+n^2}$, so $y=\displaystyle\frac{dn}{\sqrt{m^2+n^2}}$.
Once you have a numerical value for $y$, you can plug it into $x=\frac{m}{n}y$ to get a value for $x$.
(Or you can do that symbolically: $\displaystyle x=\frac{m}{n}\cdot \frac{dn}{\sqrt{m^2+n^2}} =$ $\displaystyle\frac{dm}{\sqrt{m^2+n^2}}$.)

• Very nice! Thank you very much! I think I just was on the wrong path ... Looks so easy now.
– Erik
Commented Sep 11, 2011 at 21:16
• A fiddle that implements these formulas to calculate width and height for arbitrary ratios and diagonals: jsfiddle.net/ypL7zd1a/2 - Note: if the ratio is not given as m=16 and n=9, but as decimal 1.777..., use n=1 and something like m=1.777778. Commented Nov 20, 2017 at 16:24

$$w^2+h^2=32^2,\\\frac wh=\frac{16}{9}.$$

Then dividing by $h^2$,

$$\frac{w^2}{h^2}+1=\frac{16^2}{9^2}+1=\frac{32^2}{h^2},$$

$$h=\frac{32\cdot9}{\sqrt{16^2+9^2}},w=\frac{16}9h.$$

Here is a code snippet from my gesture library. It is fully tested and calculates the width and height based upon and diagonal length and a width to height ration.

public void triggerFling(float dynamicFlingDistance, float width, float height) {

float animationStartX = (int) matrixVals[Matrix.MTRANS_X];
float animationStartY = (int) matrixVals[Matrix.MTRANS_X];
float animationEndX = 0;
float animationEndY = 0;

if(dynamicFlingDistance == 0) {

animationEndX = width;
animationEndY = height;

}
else {

if(width == 0 || height == 0) {

if(width == 0 && height !=0) {

animationEndX = (int) matrixVals[Matrix.MTRANS_X];
animationEndY = height;

}
else if(width != 0 && height ==0) {

animationEndX = width;
animationEndY = (int) matrixVals[Matrix.MTRANS_X];

}
else if(width == 0 && height == 0) {return;}//End if(width == 0 && height !=0)

}
else {

if(height > 0) {

animationEndY = (float) Math.sqrt((dynamicFlingDistance * dynamicFlingDistance) / (Math.pow((width / height), 2) + Math.pow((height / height), 2)));
animationEndX = (animationEndY / (height / width));

}
else {

animationEndY = (float) -Math.sqrt((dynamicFlingDistance * dynamicFlingDistance) / (Math.pow((width / height), 2) + Math.pow((height / height), 2)));
animationEndX = (animationEndY / (height / width));

}

}//End if(width ==0 || height == 0)

}//End if(dynamicFlingDistance == 0)

translateAnimation = new TranslateAnimation(animationStartX, animationEndX, animationStartY, animationEndY);
translateAnimation.setFillEnabled(true);
imageView.setAnimation(translateAnimation);
imageView.getAnimation().setDuration(flingAnimationTime);
imageView.startAnimation(translateAnimation);

if(bounceBack == false) {

final float animationEndXFinal = animationEndX;
final float animationEndYFinal = animationEndY;

new Handler().postDelayed(
new Runnable() {
@Override
public void run() {

matrixVals[Matrix.MTRANS_X] = animationEndXFinal;
matrixVals[Matrix.MTRANS_Y] = animationEndYFinal;

matrix.setValues(matrixVals);
imageView.setImageMatrix(matrix);
imageView.invalidate();
imageView.requestLayout();

}
}, flingAnimationTime);

}//End if(bounceBack == false)

}