Aspect Ratio Calculator
Calculate the target height from a given width while preserving the original aspect ratio. Useful for responsive design and image resizing workflows.
Reference
Common Aspect Ratios
Widescreen HD
1.78:1
YouTube, TV, laptop screens, presentations, most modern monitors
Standard / Classic
1.33:1
Old TV sets, early computer monitors, some tablets, vintage video
Square
1:1
Instagram posts, profile pictures, album art, product thumbnails
Vertical / Portrait
0.56:1
TikTok, Instagram Reels, YouTube Shorts, mobile-first video
Ultrawide
2.33:1
Ultrawide monitors, cinematic video, immersive gaming displays
Photography
1.5:1
DSLR cameras, mirrorless cameras, most 35mm photographs
Univisium / Web
2:1
Netflix originals, Twitter header images, panoramic web banners
Portrait photo
0.8:1
Instagram portrait posts, Facebook image ads
Anamorphic / Scope
2.39:1
Theatrical film, cinematic productions, black-bar widescreen movies
Explainer
What is Aspect Ratio?
An aspect ratio is the proportional relationship between the width and height of an image, screen, or video frame — expressed as width:height. A 1920×1080 display and a 1280×720 display both have a 16:9 aspect ratio because they share the same proportional shape.
Aspect ratios matter when scaling content. If you resize an image without maintaining its aspect ratio, it becomes distorted — too wide (stretched) or too tall (squished). Calculating the correct dimensions prevents this.
How to calculate: To find a missing dimension, multiply the known dimension by the ratio fraction. For a 16:9 image that is 1280px wide: height = 1280 × (9/16) = 720px.
Letterboxing vs pillarboxing: When content is narrower than the display, black bars appear on the sides (pillarboxing). When content is shorter than the display, black bars appear top and bottom (letterboxing). Both happen when aspect ratios don't match.
You might also like
Related tools
Design tools
BEM Class Generator
Generate BEM class names and sample HTML from a block, elements, and modifiers with single-dash or double-dash modifier conventions.
Design tools
Color Blindness Simulator
See how any hex color looks under four types of color vision deficiency: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (full color blindness).
Design tools
Color Mixer
Blend two colors with a ratio slider and get the mixed result in HEX, RGB, and HSL. Includes a full gradient strip with clickable swatches to copy any stop.
Design tools
CSS Box Shadow Generator
Create CSS box shadows visually. Add multiple shadow layers with control over offset, blur, spread, color, opacity, and inset. Live preview and copy-ready CSS.
Help & answers
Frequently Asked Questions
Important disclaimer: Alexonic Tools is completely free to use. There is no charge, and we do not save tool inputs or generated results. We value customer privacy and keep building and fixing each day. Always verify important financial, payroll, legal, tax, business, or production-code results before relying on them. If you see an issue, need a tool, or require an update, send feedback to the developer.