What is an aspect ratio?

An aspect ratio describes the proportional relationship between the width and height of an image, video, or layout, written as width:height — for example 16:9, 4:3, or 1:1.

How do I resize an image without distorting it?

Enter the original width and height along with either your target width or target height. The calculator works out the matching dimension so the original proportions are preserved.

When should I use a 16:9 aspect ratio?

16:9 is the standard widescreen ratio for video, presentations, and most modern displays, which makes it the usual choice for video players, hero banners, and embedded media.

When should I use a 1:1 aspect ratio?

1:1 is a square ratio, best suited to profile images, avatars, thumbnails, and social media posts where a consistent square crop is expected.

Aspect Ratio Calculator

Calculate the required image size based on the intended aspect ratio.

Original Width

Original Height

New Width

New Height

Fill in either New Width or New Height — the other is calculated automatically to keep the same ratio.

Aspect Ratio: –

1920 × 1080

Aspect Ratio Best Practices for Web Applications

Choosing the right aspect ratio is essential when designing web applications that work seamlessly across desktop, tablet, and mobile devices. The correct ratio improves usability, visual balance, and responsiveness while preventing unexpected cropping or distortion.

Desktop Web Applications

Desktop screens are typically wide and horizontal, making them ideal for landscape-oriented layouts and media.

16:9: Best for hero sections, video players, dashboards, charts, and media-heavy components.
21:9: Useful for cinematic banners, analytics dashboards, or immersive visual experiences.
1:1: Works well for avatars, profile images, icons, and card thumbnails.

Tablet Design

Tablets are used in both portrait and landscape modes, so flexible aspect ratios are important.

4:3: A natural fit for tablets, especially for content areas and image previews.
16:9: Suitable for videos and wide content when the tablet is in landscape mode.
1:1: Ideal for grids, galleries, and interactive cards.

Mobile Web Applications

Mobile devices are predominantly vertical, so aspect ratios should prioritize readability and thumb-friendly interaction.

9:16: Best for full-screen sections, onboarding screens, and mobile-first video.
1:1: Excellent for image grids, social feeds, product cards, and thumbnails.
4:5: Useful for content previews that need more vertical emphasis without full-screen takeover.

When to Use 1:1 Aspect Ratio

The 1:1 aspect ratio is one of the safest and most versatile options in web design. It adapts well across all screen sizes and orientations.

User profile photos and avatars
Product images and thumbnails
Card-based layouts and grids
Icons and brand imagery

When to Use 16:9 Aspect Ratio

The 16:9 aspect ratio is ideal for wide, immersive content and works best on desktop and landscape-oriented screens.

Hero sections and landing page banners
Video players and media previews
Dashboards and data visualizations
Marketing and promotional content

Responsive Design Tips

Use flexible containers instead of fixed dimensions
Maintain aspect ratio using CSS aspect-ratio property
Provide different media crops for desktop and mobile when possible
Test layouts in both portrait and landscape orientations

Summary

There is no single “best” aspect ratio for all use cases. Instead, choose aspect ratios based on the device, content type, and user interaction model. Using 1:1 for flexible components and 16:9 for immersive content creates a balanced, responsive web application experience.