Aspect Ratio Calculator

 

GigaBook Web Developer Tools

The aspect ratio is the relation of dimensions from height and width of an element. It's commonly shown as two number separated by a colon such as HD video widescreen aspect ratio is shown as 16:9. This is defined as x:y for the aspect ratio, this means that it doesn't matter the actual size of the element as long as the width and height have a ratio of 16:9 it will keep it's aspect ratio.

Why Is It Important?

Keeping the aspect ratio of an element is important to understand when working with resizing images.

For example if you need to reduce the size of an image you need to change the dimensions it works in. This is easy if you have an image 500 x 500 and need to reduce the image to 300 x 300.

mountain

mountain

But if you have an image that's 1024 x 768 and try to reduce the size to 300 x 300 the width of the image is squashed.

mountain-193v

mountain-193v

To stop the image width from squashing you need to resize the image and keep the aspect ratio of the original image. The aspect ratio of 1024 x 768 is 4:3 therefore if we need to resize the image to a width of 300 to work out the height we need to divide the width by 4, then multiple this by 3.

300 / 4 * 3 = 225.

Now the image we want to resize needs a height of 225.

mountain-193v

Notice the difference?

Aspect Ratio Calculator

The aspect ratio calculator is designed to make it easier to calculate the correct widths and heights for common formats such as HD video 16:9. This can be useful for applications such as working out the correct size to use for embedded video players without having the 'letter-box' problem of black space.

There are a number of default ratios to use:

  • HD Video 16:9
  • Standard Monitor 4:3
  • Classic Film 3:2
  • Cinemascope 21:9

aspect-ratio

Or you can select your own aspect ratio to use to discover the new width or height of your image.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!