Resize Images Without Stretching
Resizing images without distortion means maintaining the original aspect ratio. If you change the width, the height must scale proportionally — and vice versa. This guide shows the math and practical techniques.
Aspect Ratio Calculator
Calculate, convert, and resize aspect ratios for images, video, and responsive design.
Enter Dimensions
Result
aspect-ratio: 16 / 9;Common Aspect Ratios
Equivalent Sizes at 16:9
| Width | Height | Pixels | Label |
|---|---|---|---|
| 320 | 180 | 0.1 MP | |
| 480 | 270 | 0.1 MP | |
| 640 | 360 | 0.2 MP | |
| 768 | 432 | 0.3 MP | |
| 960 | 540 | 0.5 MP | |
| 1024 | 576 | 0.6 MP | |
| 1280 | 720 | 0.9 MP | 720p / HD |
| 1440 | 810 | 1.2 MP | |
| 1600 | 900 | 1.4 MP | |
| 1920 | 1080 | 2.1 MP | 1080p / Full HD |
| 2560 | 1440 | 3.7 MP | 1440p / 2K |
| 3840 | 2160 | 8.3 MP | 2160p / 4K UHD |
The resize formula
To resize proportionally: new_height = original_height × (new_width ÷ original_width). For example, to resize a 1920×1080 image to 1280px wide: 1080 × (1280 ÷ 1920) = 720. The result is 1280×720 — same 16:9 ratio, no stretching. To calculate from a target height instead: new_width = original_width × (new_height ÷ original_height).
CSS techniques for responsive images
Use width: 100% with height: auto on img elements for fluid scaling. The aspect-ratio CSS property reserves space before the image loads, preventing layout shift. For cropping to a specific ratio, use object-fit: cover on the img inside a container with a fixed aspect-ratio. For background images, use background-size: contain (show all) or background-size: cover (fill, may crop).
Common mistakes when resizing
Never set both width and height to fixed pixel values unless they match the original ratio — this causes stretching. Upscaling beyond the original resolution creates blurry images; prefer downscaling. When batch-resizing for thumbnails, always calculate one dimension from the other rather than using a fixed box size. Use the calculator above to find the correct dimensions for any target size.
Frequently Asked Questions
How do I calculate the new height when resizing?
Multiply the new width by the original height, then divide by the original width: new_height = new_width × (original_height ÷ original_width). For example, resizing 1920×1080 to 800px wide: 800 × (1080 ÷ 1920) = 450. Result: 800×450.
Why does my resized image look blurry?
Upscaling (making an image larger than its original resolution) creates blur because the browser or editor must invent pixels that did not exist. Always resize downward when possible. If you must upscale, use AI-based upscalers that can infer detail.
How do I resize in CSS without distortion?
Set only one dimension (width or height) and let the other be auto: img { width: 100%; height: auto; }. Or use object-fit: contain to fit inside a box while preserving the ratio, or object-fit: cover to fill the box and crop overflow.
Related Inspect Tools
Diff Checker
Compare two texts and see differences highlighted
Cron Expression Parser
Parse cron schedules into plain English with next run times
Word & Character Counter
Count words, characters, sentences, and estimate reading time
Chmod Calculator
Calculate Unix file permissions with an interactive permission matrix