Aspect Ratio Calculator
Calculate the aspect ratio of any width and height. Find equivalent dimensions for resizing without cropping.
Enter a width and height to calculate the aspect ratio, decimal ratio, and orientation. Useful for checking images, video, and responsive layouts against standard formats.
Use the result to resize proportionally, choose a crop, or set CSS aspect-ratio before media loads.
Preserve
To resize without distortion, change one dimension and calculate the other from the same ratio.
Crop
To fill a different shape, crop from the longer side instead of stretching the image.
Pad
To keep the whole image inside a different frame, add borders or background space.
16:9 examples
1280x720, 1920x1080, and 3840x2160 are the same shape at different resolutions.
CSS note
Reserve media space with aspect-ratio: 16 / 9; so images and videos do not push content down after loading.
Worked resize examples
1920x1080 scaled to 1280px wide becomes 1280x720.
1080x1350 scaled to 720px wide becomes 720x900.
4000x3000 scaled to 1200px wide becomes 1200x900.
If the result is fractional, round to the nearest whole pixel for exported image files.
Understanding Aspect Ratios
An aspect ratio describes the proportional relationship between width and height. When someone says "16:9", they mean for every 16 units of width, there are 9 units of height. It doesn't matter if those units are pixels, centimetres, or metres, the shape stays the same.
This matters because resizing an image without maintaining its aspect ratio distorts it. Stretching a 4:3 photo to fit a 16:9 slot squashes faces and warps buildings. Knowing the ratio lets you apply the resize formula manually and choose the right crop before you export.
The calculator reduces your dimensions to the simplest ratio using the greatest common divisor. So 1920×1080 becomes 16:9, and 2560×1440 becomes 16:9 too, they're the same shape at different sizes.
Common Aspect Ratios
| Ratio | Decimal | Common Resolutions | Used For |
|---|---|---|---|
| 1:1 | 1.0 | 1080×1080, 500×500 | Instagram posts, profile pictures, app icons |
| 4:3 | 1.333 | 1024×768, 2048×1536 | iPad displays, classic TV, presentations |
| 3:2 | 1.5 | 1080×720, 6000×4000 | DSLR photos, Surface tablets, 35mm film |
| 16:9 | 1.778 | 1920×1080, 3840×2160 | Widescreen monitors, YouTube, TV |
| 16:10 | 1.6 | 1920×1200, 2560×1600 | MacBook displays, business monitors |
| 21:9 | 2.333 | 2560×1080, 3440×1440 | Ultrawide monitors, cinematic displays |
| 9:16 | 0.5625 | 1080×1920 | Instagram/TikTok Stories, mobile video |
| 2:3 | 0.667 | 1000×1500 | Pinterest pins, book covers, posters |
What this means for you: Before resizing any image, check which aspect ratio your target platform requires. Using the wrong ratio means either distortion or unwanted cropping.
Why Aspect Ratios Matter
Responsive Design
CSS aspect-ratio property and padding-top tricks rely on knowing the correct ratio. Getting it wrong creates layout shift when images load at unexpected dimensions.
Video Production
YouTube needs 16:9, Instagram Reels need 9:16, and TikTok needs 9:16. Shooting in the wrong ratio means cropping out parts of your footage.
Print & Photography
Common photo print sizes carry different ratios: 6×4 is 3:2, while 8×6 is 4:3 and 12×8 is 3:2 again. Cropping a 16:9 widescreen image for print loses significant content from the sides.
Social Media
Each platform has preferred ratios, 1:1 for Instagram grid, 4:5 for feed, 9:16 for stories. Using the right ratio maximises screen space in the feed.
CSS Aspect Ratio
CSS has a native aspect-ratio property that enforces ratios without padding hacks:
Native property
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}Legacy padding trick
.wrapper {
position: relative;
padding-top: 56.25%; /* 9/16 */
}
.wrapper > img {
position: absolute;
inset: 0;
}The aspect-ratio property has 95%+ browser support. Use it for image containers, video embeds, and card layouts to prevent layout shift (CLS) while images load.
Resize Formula
Once you know the ratio, proportional resizing is just multiplication or division. Keep the ratio value the same and solve for the missing dimension.
| Starting Ratio | Known Dimension | Calculation | Result |
|---|---|---|---|
| 16:9 | Width 1280 | 1280 x 9 / 16 | 720px high |
| 16:9 | Height 1080 | 1080 x 16 / 9 | 1920px wide |
| 4:5 | Width 1080 | 1080 x 5 / 4 | 1350px high |
| 3:2 | Height 1200 | 1200 x 3 / 2 | 1800px wide |
If a result is fractional, round to the nearest whole pixel. For large images, a one-pixel rounding difference will not visibly change the shape.
Fit, Fill, Crop, and Pad
Fit inside
Scale the image until the full image fits within the target frame. This preserves all content but can leave empty space on two sides.
Fill frame
Scale the image until the target frame is full. This avoids empty space but crops content from the longer side.
Crop deliberately
Choose the focal point before cropping. Product photos, portraits, and screenshots can fail if the important area sits near an edge.
Pad with background
Add background space when you must keep the whole image visible inside a fixed shape, such as a square marketplace thumbnail.
Platform and Output Checks
| Output | Typical Ratio | Check Before Export |
|---|---|---|
| YouTube thumbnail | 16:9 | Keep text away from edges and export at 1280x720 or larger |
| Short-form video | 9:16 | Keep captions inside safe areas for app overlays |
| Instagram feed portrait | 4:5 | Crop from 1080x1350 for maximum feed height |
| Print photo | 3:2 or 4:5 | Match the lab's print ratio before ordering |
| Website card image | Project-specific | Set width, height, and aspect-ratio to prevent layout shift |
Common Edge Cases
Non-square pixels
Some older video formats use pixels that are not square. The stored resolution and display ratio can differ, so use the display aspect ratio for final layout decisions.
Screenshots with browser chrome
A screenshot can include browser UI, scrollbars, or device frames. Crop to the actual content area before calculating the ratio for a design handoff.
Animated and responsive media
GIFs, videos, and embeds need the same reserved ratio as still images. If the container ratio changes after load, nearby content can jump.
Rounding and High-Density Screens
Aspect-ratio maths often produces whole numbers for common sizes, but not always. If the calculated value is 853.333px, choose the nearest whole pixel and keep the CSS ratio in place so the browser handles layout consistently.
| Scenario | What to Do | Reason |
|---|---|---|
| Fractional output | Round to the nearest pixel | Image files need whole-pixel dimensions |
| Retina export | Export 2x or 3x at the same ratio | Higher density changes resolution, not shape |
| CSS layout | Use aspect-ratio plus width constraints | The browser can resolve fractional layout sizes |
| Print output | Check DPI and physical size | Print quality depends on pixels per inch as well as ratio |
Keep the source master larger than the final export when possible. Downscaling usually produces a cleaner result than enlarging a small source.
Record both the ratio and the final pixel size in asset notes so future crops can be recreated consistently.
Related Tools
How to use this tool
Enter the width and height of your image in pixels
Read the calculated aspect ratio, decimal ratio, and orientation
Use the ratio to resize proportionally or match a target format
Common uses
- Checking if an image fits a target format like 16:9 or 1:1
- Calculating matching dimensions for proportional resizing
- Verifying aspect ratios before cropping for social media
- Finding the correct resize dimensions for print sizes
Share this tool
Frequently Asked Questions
What is an aspect ratio?
What aspect ratio is 1920×1080?
How do I resize without cropping?
What's the difference between 16:9 and 4:3?
What aspect ratio should I use for Instagram?
What does 'aspect ratio' mean for printing?
Can I convert between aspect ratios without distortion?
What aspect ratio is best for YouTube thumbnails?
How do I calculate aspect ratio manually?
What aspect ratio do ultrawide monitors use?
Does aspect ratio affect image quality?
What aspect ratio is used for cinema?
Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.