Aspect Ratio Calculator
Calculate width or height to preserve any aspect ratio — 16:9 widescreen, 4:3, 1:1, or custom. Great for responsive images, video embeds, and UI layouts.
Aspect ratio
16:9 (1.7778)
How to use the aspect ratio calculator
Enter your source dimensions. Then enter ONE of target width or target height — the other is computed to maintain the same ratio.
Formula & explanation
Ratio = source width ÷ source height. Target height = target width ÷ ratio (and vice versa).
Examples
1920×1080 source = 16:9. Target width 1280 → height 720.
Frequently asked questions
- What aspect ratio is 1920×1080?
- 1920×1080 is 16:9, the standard widescreen ratio used by most HD and 4K monitors, TVs, and video platforms like YouTube.
- How do I keep the aspect ratio when resizing an image?
- Enter your original width and height as the source. Then type only the new width (or only the new height) and leave the other field blank — the calculator fills in the correct value automatically.
- What is 4:3 in pixels?
- Common 4:3 sizes are 640×480, 800×600, and 1024×768. Enter any of those as the source and the calculator will confirm the 4:3 ratio.
- How do I calculate aspect ratio for a custom size?
- Enter the width and height in the source fields. The calculator simplifies the ratio to its lowest whole-number form (e.g. 1280×800 → 8:5) and shows the decimal equivalent.
Related design & css tools
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.
- PX ↔ REM ConverterConvert between pixels and rems for any base font size (default 16px). Paste a list of values to convert all at once — useful for responsive CSS and design token work.
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.