Aspect Ratio Calculator

Calculate aspect ratios and pixel dimensions for media and screens.

Aspect Ratio Calculator

Result

reduced: 3:2
decimal: 1.5 : 1
CSS: aspect-ratio: 3 / 2;
nearest preset: Photo 3:2 (3:2)
orientation: landscape • pixel count: 345,600
common sizes at 3:2:

Solve size from ratio

ratio (W:H)
:
given side
value (px)

Fit and cover calculator

How the 3:2 image is sized inside the box: fit (object-fit: contain) keeps everything visible and may leave empty bands, cover fills the box and crops the overflow.

box width (px)
box height (px)
fit → 1080 × 720200 px of empty width (pillarbox)
cover → 1280 × 853133 px cropped from the height

Fit preview (contain)

Cover preview (crop)

What is an Aspect Ratio Calculator?

An aspect ratio calculator is a tool that computes the proportional relationship between an image or screen's width and height. Aspect ratio is expressed as two numbers separated by a colon (e.g., 16:9, 4:3, 1:1) and is critical for maintaining visual consistency when resizing images, designing responsive layouts, or specifying video dimensions.

CodeHelper's Aspect Ratio Calculator works in both directions: calculate the ratio from pixel dimensions, or determine missing dimensions from a known ratio and one side.

Common Aspect Ratios

  • 16:9: Standard widescreen for HD video, YouTube, and most monitors.
  • 4:3: Classic TV and older monitor format, still used in some presentations.
  • 1:1: Square format, popularized by Instagram profile images and thumbnails.
  • 9:16: Vertical video format for mobile, TikTok, Instagram Reels, and Stories.
  • 21:9: Ultrawide cinematic format for immersive displays and film.

How to use the Aspect Ratio Calculator

  1. Enter width and height in pixels to calculate the reduced ratio.
  2. Or enter a known ratio and one dimension to solve for the missing side.
  3. Use the fit/cover preview to visualize how your image fills a container.
  4. Copy the generated CSS aspect-ratio property for your stylesheet.

Fit vs Cover: what is the difference?

  • Object-fit: contain: Scales the image to fit entirely within the container. Preserves the original ratio but may leave empty space (letterboxing/pillarboxing).
  • Object-fit: cover: Scales the image to fill the container completely, cropping as needed. No empty space, but part of the image may be hidden.
  • CSS aspect-ratio property: Locks an element to a specific ratio so it scales proportionally as its width changes. Replaces the classic padding-bottom hack for responsive video embeds.

Whether you are designing responsive images, preparing video thumbnails, planning print layouts, or implementing CSS aspect-ratio containers, this free calculator ensures your dimensions are always mathematically correct.

Frequently Asked Questions

What resolution is 16:9?

Common 16:9 sizes are 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD) and 3840x2160 (4K UHD). Any width times 9/16 gives the matching height: that is exactly what this calculator does for arbitrary dimensions, in both directions.

What is the difference between 16:9 and 4:3?

They are different width-to-height proportions: 16:9 is the widescreen standard of modern video, monitors and YouTube; 4:3 is the squarer classic TV and iPad format. At the same width of 1920 pixels, 16:9 is 1080 pixels tall while 4:3 is 1440. Converting content between the two requires cropping or letterboxing.

How do I calculate an aspect ratio from pixel dimensions?

Divide both dimensions by their greatest common divisor: 1920x1080 divided by 120 gives 16:9. This calculator does it instantly in both directions: enter pixels to get the ratio, or lock a ratio and one dimension to get the other, which is the everyday case when resizing images and embeds.

What aspect ratios do social platforms use?

The current standards: 16:9 for YouTube and presentations, 9:16 for Stories, Reels, Shorts and TikTok, 1:1 and 4:5 for feed posts, and about 1.91:1 (1200x630) for link preview images like Open Graph. The calculator converts your source dimensions to any of these targets without distortion.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolColor Shades GeneratorGenerate a full range of tints and shades from any HEX color. Tailwind-compatible 50-950 scale, copy HEX/RGB/HSL values instantly. Free online color palette tool.

Free forever, no ads, no tracking. Support the project