The Complete Guide to Aspect Ratios: Shapes, Screens and Sizes
Every image, video, screen and sheet of paper has a shape, and that shape is summed up in two small numbers separated by a colon. That pair of numbers is the aspect ratio. It is one of the simplest ideas in visual technology and also one of the most constantly misunderstood, because it describes proportion rather than size. A thumbnail and a cinema screen can share an identical aspect ratio while differing in area by a factor of thousands. Aspectly exists to make that proportion effortless to work with: you give it a ratio and one dimension, and it finds the other dimension exactly, every time, without rounding surprises or stretched results.
Formally, an aspect ratio is the width of a rectangle divided by its height. Written as 16:9, it says that for every sixteen units of width there are nine units of height. Written as a decimal, the same ratio is 1.78. Written as a percentage trick in CSS, it becomes a padding-top of 56.25 percent. These are three dialects for one fact, and fluency in all three matters depending on whether you are editing video, building a website, ordering a print or shopping for a monitor. A good calculator should move between them freely, which is why Aspectly shows the simplified ratio, the decimal and the CSS percentage side by side in its results bench.
Why simplifying a ratio matters
Real dimensions rarely arrive in their simplest form. A camera may record 1920 by 1080 pixels, a phone screenshot may measure 1170 by 2532, and a scanned photograph may be 3508 by 2480. Simplifying those pairs — dividing both numbers by their greatest common divisor — reveals the underlying standard. The first is 16:9, the second is 9:19.5 in disguise, more conventionally described as an extra-tall phone ratio, and the third is very close to the A4 paper family. Simplification is not cosmetic. Once you know the simplified ratio, you know which family a file belongs to, which devices will display it without bars, and which export settings will preserve it. Aspectly simplifies automatically whenever you unlock the ratio and type a width and height pair, turning raw pixel counts into a recognisable shape in one glance.
The greatest common divisor method is exact for whole numbers, which is why calculators prefer it over eyeballing decimals. Two dimensions that look unrelated, such as 1366 by 768, simplify only to 683:384, which explains why that once-common laptop resolution never matched 16:9 content perfectly and why videos on those screens showed hairline bars or slight scaling. Knowing this history helps you forgive old hardware and choose better resolutions today: 1920 by 1080, 2560 by 1440 and 3840 by 2160 are all exact 16:9, so video scales cleanly with no wasted pixels.
The famous ratios and where each one rules
The 16:9 ratio dominates modern video for good historical reasons. It was chosen as a compromise that could display both older 4:3 television and wider cinema films with relatively small bars, and it became the shape of HDTV, YouTube, streaming, presentations and most laptop screens. If you are making video for a general audience and must pick one shape, 16:9 remains the safest default. Its taller sibling 9:16 is simply 16:9 rotated ninety degrees, and it owns vertical short-form video, stories and reels, where the phone stays upright in the hand. Designing for 9:16 means keeping faces and text in the central safe area and remembering that captions occupy the lower fifth of the frame.
The 4:3 ratio is older than most of its users. It shaped broadcast television for half a century, early computer monitors, the original iPad and many classroom projectors that still hang in schools today. Slides, documents and scanned archives frequently remain 4:3, and tablet reading apps favour it because it sits comfortably between portrait paper and landscape video. The 1:1 square, once dismissed as a limitation of early social apps, has become a deliberate design choice: it takes the most feed height on mobile without demanding rotation, treats portrait and landscape source photos equally, and gives product photography a calm, gallery-like symmetry.
At the wide extreme, 21:9 — sometimes marketed as ultrawide and often built as 64:27 in real panels — gives editors a timeline-friendly canvas, gives gamers extra peripheral vision and approximates the anamorphic cinema experience at home. Films shot at 2.39:1 sit inside 21:9 with only slim bars. Photographers, meanwhile, live mostly at 3:2, the shape of 35 millimetre film inherited by nearly every DSLR and mirrorless sensor, with 4:3 and 1:1 available as in-camera crops. Print adds its own family: the ISO A-series uses the elegant ratio of one to the square root of two, which keeps its shape when folded in half, a trick no video ratio can perform.
Scaling without distortion: the ratio lock idea
Distortion happens when width and height are scaled by different factors. A face stretched ten percent wider still reads as a face in a casual glance, yet viewers sense that something is wrong, and logos, circles and text reveal the cheat immediately: circles become ellipses and brand marks break their own guidelines. The ratio lock prevents this by treating the ratio as the master value and any single dimension as the only free input. Change the width and the height is derived; change the height and the width is derived. The mathematics is a single multiplication — new height equals new width times the ratio height over the ratio width — but embedding it in a live tool removes the temptation to guess, round carelessly or resize by dragging a corner handle freehand.
Locking is equally valuable in the opposite direction. When you receive an asset of unknown shape, unlocking and typing its true pixel dimensions tells you the ratio it actually is, not the ratio the filename claims. Mismatches between claimed and actual ratios are a quiet source of bugs in video pipelines, advertising specifications and marketplace listings, where a creative delivered at 1200 by 628 may be requested again at twice the size and someone must know that 2400 by 1256, not 2400 by 1200, is the faithful upscale. Aspectly handles both directions in the same bench, so discovery and production live one click apart.
Diagonal-size mode: what a 55-inch screen really measures
Televisions and monitors are sold by diagonal because a single large number is tidy marketing and because, historically, picture tubes were measured that way. The diagonal, however, hides the two numbers you actually need when planning a room, a desk, a flight case or a wall mount: width and height. Two screens can both claim 55 inches and have very different footprints if their ratios differ, although with modern 16:9 panels the answer is consistent. The geometry is pure Pythagoras. The diagonal is the hypotenuse; the width and height scale from the ratio parts; so width equals diagonal times sixteen over the square root of sixteen squared plus nine squared. For a 55-inch 16:9 screen that yields about 47.9 inches wide and 27.0 inches tall, before adding the bezel and stand, which manufacturers usually exclude from the headline number.
Diagonal mode also runs in reverse from a known side. If a product listing gives a diagonal and a width — common for ultrawide monitors and for laptops — the missing height follows from the square root of diagonal squared minus width squared. Aspectly offers all three routes: diagonal plus ratio, diagonal plus width and diagonal plus height. This matters beyond television. Phone screens, camera monitors, drawing tablets and even picture frames are frequently specified by diagonal alone, and converting that single number into a rectangle you can measure against a wall with a tape is the difference between a purchase that fits and a return that costs a weekend.
Aspect ratios on the web and in CSS
Web developers meet aspect ratios as a layout defence. If a browser knows an image is 16:9 before the file loads, it can reserve the correct space and the page does not jump as media arrives — a behaviour measured as cumulative layout shift and rewarded by search engines when kept low. Modern CSS offers a direct aspect-ratio property, while older code used the padding-top percentage trick, where a container for 16:9 receives 56.25 percent top padding because nine divided by sixteen equals 0.5625. Aspectly displays that percentage for any ratio so legacy codebases and email templates remain easy to maintain. The same thinking governs responsive video embeds, hero banners and card grids: define the shape once, let width be fluid, and let height follow by rule rather than by fixed pixels that break on the next phone size.
Design tools tell the same story in a friendlier accent. Constraining proportions while dragging, locking a frame to a preset and exporting at one-times, two-times and three-times scale are all ratio-lock operations with better marketing. Understanding the underlying arithmetic makes those features predictable instead of magical, and it explains why a design exported at the wrong ratio cannot be rescued by a clever crop alone when the subject sits near an edge. The time to choose the shape is before the shoot, the edit or the first line of layout code, and a calculator is the cheapest place to make that decision deliberately.
Common mistakes and how to avoid them
The first mistake is confusing resolution with ratio. Resolution is the count of pixels; ratio is their shape when arranged. Increasing resolution sharpens an image but does not change what fits inside it, and requesting a higher-resolution file in the wrong ratio only gives you a sharper crop. The second mistake is trusting platform labels without checking dimensions, because a video exported as 1080p is a height, not a promise about width. The third is mixing units across a diagonal calculation, entering centimetres where the tool expects inches and concluding that a television is the size of a wardrobe. Aspectly keeps units explicit in diagonal mode for exactly this reason. The fourth mistake is rounding intermediate steps by hand; rounding should happen once, at presentation, not inside the chain of calculations, or errors compound across a family of exported sizes.
A practical workflow ties all of this together. Start from the destination: the screen, feed, slide or page where the work will live. Note its ratio first and its pixel dimensions second. Set that ratio in the lab, scale by the width or height your source can comfortably supply, and export the exact pair the calculator returns. Check the diagonal whenever physical size matters, from monitor arms to printed banners viewed across a hall. Keep the lock on unless you are investigating an unknown file. Followed consistently, this small discipline eliminates stretched logos, surprise bars, cropped faces and the quiet embarrassment of a presentation that almost fits the projector. That is the entire promise of Aspectly: two numbers, treated with respect, doing more work than any filter.
Frequently asked questions
What is an aspect ratio and how is it written?
An aspect ratio is the proportional relationship between width and height, written as width:height such as 16:9. It describes shape, not physical size, so a 1920×1080 screen and a 1280×720 screen share the same 16:9 shape.
How do I calculate a missing height from width and ratio?
Divide the width by the ratio's width part and multiply by the ratio's height part. For 16:9 at 1920 wide, height = 1920 ÷ 16 × 9 = 1080. Aspectly does this instantly when you scale by width with the ratio lock on.
What does diagonal-size mode do?
Diagonal-size mode works backwards from the diagonal measurement printed on TVs and monitors. Give Aspectly a diagonal and a ratio such as 55 inches at 16:9 and it uses Pythagoras to return the actual width and height of the panel.
Which aspect ratio should I use for video, photos and social media?
Use 16:9 for most video and presentations, 9:16 for vertical short-form video, 1:1 for square social posts, 4:3 for classic slides and some tablets, 3:2 for DSLR photos, and 21:9 for ultrawide monitors and cinematic footage.
Why does my image get cropped or show black bars?
Black bars or cropping happen when the image ratio and the display ratio differ. A 4:3 photo on a 16:9 screen leaves side bars, while filling the screen would crop top and bottom. Matching ratios before you export avoids both problems.
Is Aspectly free and does it upload my data?
Yes, Aspectly is completely free with unlimited usage and no signup. All calculations run in your browser, so your numbers are never uploaded to a server.