How do I find the height from the width and the aspect ratio?

Multiply the width by the ratio height and divide by the ratio width. For 16:9 and a width of 1280, the height is 1280 x 9 / 16 = 720.

What is the difference between fit and fill?

Fit shows the whole picture and may leave bars. Fill covers the whole space and cuts away what sticks out.

Why round to an even number?

Many video encoders need an even width and height. The calculator rounds the size and shows how far the result is from the exact ratio.

How do I keep the aspect ratio in CSS?

Use the aspect-ratio property, for example aspect-ratio: 16 / 9, together with a width, and object-fit to fit or fill the picture.

Width and Height Calculator: Resize Keeping the Aspect Ratio

Work out a missing width or height in three ways: scale from an original size, build from a ratio such as 16:9, or fit a picture into a box with bars or a crop.

Three ways to work out a width or a height

Scale from the original size. You know the size of a picture and the new width or height that you want. The other side follows.
Start from a ratio. You know the ratio, for example 16:9, and one side. This is how you find the height of a 16:9 video that is 1000 pixels wide: 1000 x 9 / 16 = 562.5.
Fit into a box. You have a picture and a space, such as a 1920 x 1080 screen, and want to know how big the picture is when it fits inside, or when it fills the space.

The formulas

height = width x ratio height / ratio width
width  = height x ratio width / ratio height

For a ratio you can use any two numbers, such as 16 and 9, or the original size of the picture, such as 4000 and 3000.

Fit and fill

When the picture and the box have different shapes, there are two ways to place the picture:

Fit (contain). The whole picture is visible. It is scaled until one side touches the box, and the rest is empty. Bars on the sides are called pillarboxes, and bars at the top and bottom are letterboxes.
Fill (cover). The picture is scaled until the whole box is covered. The parts that stick out are cut away.

Example: a 4000 x 3000 picture in a 1920 x 1080 box. Fit scales it by 0.36 to 1440 x 1080, with a bar of 240 pixels on each side. Fill scales it by 0.48 to 1920 x 1440, and 180 pixels are cut from the top and from the bottom.

Round for video

Choose a multiple of 2, 4, 8 or 16 to get sizes that video encoders and some image tools accept. In ffmpeg, the value -2 for a side keeps the aspect ratio and makes that side even.

In code

/* CSS */
img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }  /* fill */
img { object-fit: contain; }                                     /* fit */

# ffmpeg: width 1280, height follows and stays even
ffmpeg -i in.mp4 -vf "scale=1280:-2" out.mp4

# ImageMagick: width 1280, height follows
magick in.jpg -resize 1280x out.jpg

Related tools

See the main aspect ratio calculator, and the 16:9, 4:3 and 1:1 pages. To change a picture, use the image resizer or the image cropper.

Width and Height Calculator