Aspect Ratio Calculator

An aspect ratio calculator tells you the shape of a picture, screen or page, and keeps that shape when you change its size. Type a width and height and our free Aspect Ratio Calculator simplifies them to the smallest whole-number ratio, shows the decimal ratio and names the nearest common format, such as 16:9, 4:5 or 1.91:1. Lock the ratio and type a new width to get the matching height, or the other way round, with a clear note whenever rounding nudges the shape. One-click presets cover video, social media, photo prints and paper sizes, a preview box is drawn to the exact proportions, and you can drop in an image to read its dimensions on your own device. When you are done, copy a ready-made CSS aspect-ratio rule for your website.

How to use the Aspect ratio

1. 1 Enter a width and heightType the two dimensions in the same unit, such as 1920 and 1080 pixels, 8 and 10 inches, or 210 and 297 millimeters. Decimals like 8.5 are fine. Use the swap button to flip between landscape and portrait.
2. 2 Read the ratioThe calculator shows the simplified ratio, the decimal ratio, the orientation and the nearest common named ratio, with how far off it is as a percentage.
3. 3 Resize with the ratio lockedType a new width to get the height that keeps the same shape, or type a height to get the width. Choose whole numbers, even numbers for video, or two decimals, and read the rounding note.
4. 4 Start from a preset or an imagePick a commonly recommended size for video, social posts, prints or paper, or choose an image file to read its exact pixel dimensions. The image stays on your device.
5. 5 Copy the CSSCopy the aspect-ratio rule to give a container, video embed or image the same proportions on your website.

What an aspect ratio is and how it is calculated

An aspect ratio describes the proportional relationship between width and height. It says nothing about size: a 1920 by 1080 video and a 640 by 360 thumbnail have the same 16:9 shape, even though one has nine times as many pixels. That is why the ratio matters so much when you move content between screens, platforms and print. If the shape matches, the content fits cleanly. If it does not, something has to give, which usually means cropping, black bars or stretching.

To find the ratio, the calculator divides both numbers by their greatest common divisor, the largest whole number that divides into both without a remainder. For 1920 and 1080 that number is 120, which leaves 16 and 9. For 1080 by 1350 it is 270, which leaves 4:5. When you enter decimals, such as 8.5 by 11 inches for US Letter paper, the tool first scales both values up to whole numbers and then simplifies, giving 17:22.

The decimal ratio is the width divided by the height, written as a number to one, such as 1.7778:1 for 16:9. Decimals make it easy to compare shapes at a glance and are how cinema formats are usually described, as in 1.85:1 and 2.39:1. Some real-world sizes simplify to awkward fractions. A 1366 by 768 laptop screen reduces to 683:384, which is close to 16:9 but not exact, so the calculator also shows the nearest named ratio and the percentage difference. Anything within about one percent behaves like the standard format in practice.

Common aspect ratios and where you meet them

A handful of ratios cover most of what people make and watch. Knowing which one a platform or device expects saves a lot of re-exporting.

• 16:9 is the standard for HD and 4K video, YouTube, televisions and most computer monitors. 1280×720, 1920×1080 and 3840×2160 are all 16:9.
• 9:16 is the same shape turned upright, used for phone-first vertical video such as stories, reels and short-form clips. 1080×1920 is the usual working size.
• 4:3 was the shape of older televisions and is still common on tablets and compact cameras.
• 3:2 comes from 35mm film and is the native shape of many DSLR and mirrorless camera sensors, which is why a 4×6 inch print fits a full photo without cropping.
• 1:1 is a square, used for profile pictures, product tiles and square social posts.
• 4:5 is a slightly tall portrait shape that fills more of a phone screen in a feed than a square does, and it matches an 8×10 inch print.
• 1.91:1 is the wide landscape shape used for link preview images on many social networks, typically 1200×630 pixels.
• 21:9 is a marketing name for ultrawide monitors. The real panels are usually 2560×1080 (64:27) or 3440×1440 (43:18), both a little wider than 21:9.
• 2.39:1, often called scope, is the widescreen cinema format, while 1.85:1 is the flatter theatrical format.

Resizing without distortion and why rounding matters

Stretching happens when width and height are scaled by different amounts. The fix is to lock the ratio, change one dimension and let the other follow. With the ratio locked, the calculator multiplies your new width by the original height divided by the original width. A 1920 by 1080 image resized to 1280 wide becomes exactly 720 tall, because 1280 is a clean multiple of 16.

Pixels must be whole numbers, though, and not every width gives a whole height. Resize the same image to 1000 wide and the exact height is 562.5. Rounding to 563 changes the shape by less than a tenth of a percent, which nobody will see, but some platforms and video encoders check sizes strictly. The calculator therefore shows the exact value, the rounded value and how much the ratio drifts, and the table of common widths marks which ones divide exactly.

If you are exporting video, choose even numbers. Many encoders that use 4:2:0 chroma subsampling, which is the default for most H.264 and H.265 delivery, need both dimensions to be divisible by two. An odd height can cause an export error or a hidden padding row. For images, whole numbers are enough. When the two values you need will not divide cleanly at all, it is usually better to crop a few pixels than to squash the picture.

Sizes for video, social media and link previews

Platforms publish recommended sizes, and they do change them from time to time, so treat any list, including our presets, as a starting point and check the platform help pages before a major campaign. The figures below are the ones commonly recommended at the time of writing.

For video, 1920×1080 and 3840×2160 at 16:9 remain the norm for YouTube and television, and 1280×720 is the usual size for a YouTube thumbnail. Vertical stories, reels and short-form clips on most networks are designed at 1080×1920, a 9:16 shape. Keep important text and faces away from the top and bottom edges, where app buttons and captions sit on top of vertical video.

For feed images, Instagram accepts square 1080×1080, portrait 1080×1350 at 4:5 and landscape images, and it has moved its profile grid to taller 3:4 thumbnails, so a 1080×1440 image now previews without cropping. On X, a 16:9 landscape image such as 1600×900 is a common choice. Link preview images for Facebook, LinkedIn and other sites that read Open Graph tags are generally recommended at around 1200×630, close to 1.91:1. If your shared links show a badly cropped picture, an image that is the wrong shape is the usual cause.

Photo prints and paper sizes

Print sizes are ratios too, and they rarely match the shape your camera produces. A typical camera photo is 3:2, which fits a 4×6 inch print exactly. A 5×7 print is 5:7 and an 8×10 print is 4:5, so the same photo has to lose some of its long edge to fill either one. Enter the print size and your photo size into the calculator and compare the two ratios before you order, so you can choose the crop yourself instead of leaving it to the printer.

To work out the pixels you need, multiply each inch measurement by the print resolution. At 300 pixels per inch, a commonly used target for sharp photo prints, a 4×6 needs 1200×1800 pixels and an 8×10 needs 2400×3000. The ratio stays the same whatever resolution you choose.

Paper follows two main systems. North America uses US Letter, 8.5 by 11 inches, a 17:22 ratio. Most other countries use ISO 216 A-series paper, where every size has a ratio of 1 to the square root of 2, about 1:1.414. That ratio has a neat property: cut an A4 sheet in half across its long side and you get two A5 sheets with exactly the same shape. Because Letter and A4 are different shapes, a document laid out for one will gain margins or be scaled slightly when printed on the other.

Using aspect-ratio in CSS

On the web, the CSS aspect-ratio property tells a box which shape to keep as its width changes. Writing aspect-ratio: 16 / 9 together with width: 100% makes an element fill its column and calculate its own height, which is ideal for video embeds, image placeholders, cards and maps. The property is supported in all current major browsers. Copy the rule from the calculator and apply it to the element you want to shape.

Before that property existed, developers used the padding trick: an empty element with padding-top set to the height divided by the width as a percentage, such as 56.25% for 16:9, because vertical padding percentages are calculated from the width. The calculator shows this value too, which is useful when you maintain older stylesheets.

For images, include width and height attributes in your HTML that match the file. Browsers use them to work out the aspect ratio and reserve the right amount of space before the image downloads, which helps prevent the page from jumping as it loads and supports a better Cumulative Layout Shift score. If you then want the image to fill a box of a different shape, add object-fit: cover to crop it neatly rather than stretch it.

Checking an image privately

When you choose an image, the browser reads the file on your own device and reports its natural width and height, which the calculator then uses as the starting dimensions. The file is not uploaded to our server. Photos taken on a phone sometimes store their rotation separately, and the dimensions shown are the ones your browser displays after applying it, so a portrait photo appears as portrait. If a format such as HEIC will not open, convert a copy to JPG or PNG first.

Examples you can copy

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

<iframe class="video" src="https://www.youtube.com/embed/VIDEO_ID" title="Product demo" allowfullscreen></iframe>

<img src="/img/team.jpg" width="1600" height="1067" alt="Our team at work" class="thumb">

.thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

New height = new width × original height ÷ original width

1920 × 1080 resized to 1280 wide:
1280 × 1080 ÷ 1920 = 720   (exact)

1920 × 1080 resized to 1000 wide:
1000 × 1080 ÷ 1920 = 562.5 (round to 562 or 563)

Common mistakes to avoid

Frequently asked questions