Image Aspect Ratio Calculator
Calculate the aspect ratio from pixel dimensions, derive missing dimensions from a known ratio, or generate a responsive srcset for any image size. All calculations run in your browser.
Frequently Asked Questions
How do I calculate aspect ratio from pixel dimensions?▼
Divide both width and height by their Greatest Common Divisor (GCD). For 1920×1080: GCD(1920,1080) = 120, so 1920/120 = 16 and 1080/120 = 9, giving 16:9. For 1280×720: GCD = 80, so 1280/80 = 16 and 720/80 = 9 — also 16:9. The decimal ratio is simply width/height = 1.778 for 16:9.
What aspect ratio should I use for responsive web images?▼
For hero images: 16:9 (1920×1080) is the web standard. For thumbnails: 3:2 (600×400) or 4:3. For social cards (Open Graph): 1.91:1 (1200×628). For square thumbnails: 1:1. For portrait (mobile): 9:16 or 3:4. Use the srcset helper to generate all needed sizes for responsive images.
What is the padding-top trick for responsive aspect ratios in CSS?▼
Use percentage padding-top to maintain aspect ratio: for 16:9, set padding-top: 56.25% (9/16 × 100). For 4:3, use padding-top: 75%. In modern CSS, use the aspect-ratio property instead: aspect-ratio: 16/9. The padding-top trick is needed for older browser support only.
What srcset sizes should I generate for responsive images?▼
A good starting set covers the common viewport widths: 480w (mobile small), 640w (mobile standard), 768w (tablet portrait), 1024w (tablet landscape), 1280w (laptop), 1920w (desktop full HD). Add 2x versions (e.g. 960w for 480w containers) if supporting high-DPI displays. Use WebP or AVIF format for best compression at each size.
What aspect ratio is best for video thumbnails?▼
YouTube, Vimeo, and all major video platforms use 16:9 (1920x1080 or 1280x720) as the standard video thumbnail aspect ratio. Shorts/Reels use 9:16 (vertical). For custom video players on the web, 16:9 is the safe default. Never use 4:3 for new video content -- it will letterbox on widescreen displays.
Related Products
on GumroadDeveloper Productivity Bundle
Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.
Buy on Gumroad →AI Prompt Engineering Toolkit
58 structured prompt templates for Claude, ChatGPT, and Gemini — organized by use case. Code Review, Debugging, Documentation, Architecture, and 10 model-specific tips. Stop writing prompts from scratch.
Buy on Gumroad →Developer Cheat Sheet Bundle
10 print-ready cheat sheets for the tools developers use every day: Git, Docker, Linux CLI, SQL, Regex, HTTP Status codes, VS Code shortcuts, Bash scripting, jq/JSON, and Markdown.
Buy on Gumroad →You Might Also Need
CSS Specificity Calculator
Calculate CSS selector specificity as (inline, ID, class, element) notation. Compare two selectors to see which wins the cascade. Supports :not(), :is(), :has(), :where(), attribute selectors, and pseudo-elements.
Open free tool →
CSS Clip-Path Generator
Generate CSS clip-path values visually. Choose from 16 polygon presets (triangle, star, arrow, hexagon), circle, ellipse, and inset shapes. Live preview, one-click copy. Free, no signup.
Open free tool →
HTML to Markdown Converter
Convert HTML to Markdown instantly. Supports headings, bold, italic, links, images, lists, tables, code blocks, and blockquotes. Free online tool, runs in your browser.
Open free tool →
More Free Tools
Related Articles
CSS Grid vs Flexbox: Complete Guide with Interactive Examples 2025
CSS Grid vs Flexbox with real code examples for every common layout pattern. Holy Grail layout, card grid, navigation bar, sidebar — see exactly when to use each one.
Color Picker Tools for Developers: HEX, RGB, HSL, and CSS Custom Properties in 2026
Use color picker tools effectively in web development. HEX/RGB/HSL conversion, CSS theming with custom properties, WCAG contrast checking, and palette generation.
Color Picker Hex RGB — Convert and Pick Colors for Web Development
Color picker hex RGB — convert between HEX, RGB, HSL, and CSS color formats instantly. Learn how color systems work in CSS, JavaScript, and design tools with practical examples.
CSS Gradient Generator Online: Create Linear, Radial & Conic Gradients Free
Generate beautiful CSS gradients online for free. Build linear, radial, and conic gradients visually, copy the CSS code, and use it instantly in your project — no install needed.
CSS Gradient Guide 2026: Linear, Radial, Conic, and Advanced Patterns
Master CSS linear, radial, and conic gradients with copy-paste code. Includes performance tips, animation techniques, dark mode handling, gradient mesh alternatives, and production UI design recipes.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$9/mo after trial · Cancel anytime
Want the full toolkit?
Get DevPlaybook Pro
Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →