Aspect Ratio Calculator
Calculate aspect ratios for images and videos instantly. Get CSS code and dimensions for Instagram, TikTok, YouTube, and all standard aspect ratios.
Live Preview
Live Preview
1920 × 1080
16:9
Width:
1920px
Height:
1080px
Aspect Ratio:
16:9
Generated Code
Generated Code
.container { aspect-ratio: 16 / 9; /* Or use the decimal value */ /* aspect-ratio: 1.7778; */ }
<div class="aspect-video"> <!-- Your content --> </div>
Calculate Aspect Ratio
Calculate Aspect Ratio
ASPECT RATIO
16:9
Decimal: 1.7778
Quick Presets
UNIVERSAL RATIOS
X (TWITTER)
YOUTUBE
TIKTOK
How to use Aspect Ratio Calculator?
Our Aspect Ratio Calculator makes it incredibly easy to calculate and work with aspect ratios for images, videos, and responsive designs. Follow these simple steps to get started.
Enter Dimensions
Enter the width and height of your image or video in pixels. The calculator will automatically compute the aspect ratio and display it in both ratio format (e.g., 16:9) and decimal format (e.g., 1.7778).
Use Quick Presets
Click on any preset button to instantly load common aspect ratios. We provide presets for standard ratios (16:9, 4:3, 1:1) and social media platforms (Instagram, TikTok, YouTube, YouTube Shorts, Instagram Reels). This saves time and ensures you're using the correct dimensions for each platform.
View Live Preview
See a visual representation of your aspect ratio in the preview box. The preview updates in real-time as you change the dimensions, helping you visualize how your content will look.
Copy CSS Code
Get ready-to-use CSS code for your aspect ratio. The calculator generates both standard CSS using the aspect-ratio property and Tailwind CSS classes. Simply click the copy button to copy the code to your clipboard and paste it into your project.
What is Aspect Ratio?
Aspect ratio is the proportional relationship between the width and height of an image, video, or screen. It's expressed as two numbers separated by a colon (e.g., 16:9), representing the ratio of width to height.
Formula: Aspect Ratio = Width : Height
For example, if an image is 1920 pixels wide and 1080 pixels tall, the aspect ratio is 1920:1080, which simplifies to 16:9. This means for every 16 units of width, there are 9 units of height.
Common Aspect Ratio Formats
Aspect ratios can be expressed in several ways:
/* Ratio format */ aspect-ratio: 16 / 9; /* Decimal format */ aspect-ratio: 1.7778; /* CSS aspect-ratio property */ .container { aspect-ratio: 16 / 9; }
Why Knowing Aspect Ratio is Important
Understanding and using the correct aspect ratio is crucial for creating professional-looking content across different platforms and devices. Here's why it matters:
Platform Optimization
Each social media platform has specific aspect ratio requirements. Using the correct ratio ensures your content displays properly without cropping, distortion, or black bars. Instagram posts use 1:1, while Instagram Reels and TikTok use 9:16.
Responsive Design
Aspect ratios are essential for responsive web design. The CSS aspect-ratio property allows you to maintain consistent proportions across different screen sizes, preventing layout shifts and ensuring content looks good on all devices.
Professional Quality
Proper aspect ratios prevent image distortion and maintain visual quality. Whether you're creating videos, images, or web layouts, using the correct aspect ratio ensures your content looks professional and polished.
Performance & SEO
Using CSS aspect-ratio helps prevent Cumulative Layout Shift (CLS), which improves your website's Core Web Vitals score. This can positively impact your SEO rankings and user experience.
Popular Aspect Ratios to Know
Here are the most commonly used aspect ratios across different platforms and use cases:
16:9 (Widescreen)
The standard widescreen format used for HD videos, YouTube videos, computer monitors, and most modern displays. Common dimensions: 1920×1080, 1280×720, 3840×2160 (4K).
aspect-ratio: 16 / 9;
1:1 (Square)
Perfect square format, commonly used for Instagram posts, profile pictures, and social media thumbnails. Common dimensions: 1080×1080, 1200×1200.
aspect-ratio: 1 / 1; /* or aspect-square in Tailwind */
9:16 (Portrait/Vertical)
Vertical format used for mobile videos, Instagram Stories, Instagram Reels, TikTok videos, and YouTube Shorts. Common dimensions: 1080×1920, 720×1280.
aspect-ratio: 9 / 16;
4:3 (Traditional)
The classic TV and computer monitor format, still used for some presentations and older displays. Common dimensions: 1600×1200, 1024×768.
aspect-ratio: 4 / 3;
Social Media Specific Ratios
Feed (Square): 1:1 — 1080 × 1080
Feed (Portrait): 4:5 — 1080 × 1350
Feed (Landscape): 1.91:1 — 1080 × 566
Stories / Reels: 9:16 — 1080 × 1920
Feed Image: 1:1 or 4:5 — 1080 × 1080 / 1080 × 1350
Stories: 9:16 — 1080 × 1920
Cover Photo: 2.63:1 — 820 × 312
Feed Post: 1:1 or 4:5 — 1080 × 1080 / 1080 × 1350
Link Preview: 1.91:1 — 1200 × 627
Cover Image: 4:1 — 1584 × 396
X (Twitter)
Feed Image: 16:9 or 1:1 — 1600 × 900 / 1080 × 1080
Header: 3:1 — 1500 × 500
YouTube
Thumbnail: 16:9 — 1280 × 720
Shorts: 9:16 — 1080 × 1920
Channel Banner: 16:9 — 2560 × 1440
TikTok / Snapchat
Videos / Stories: 9:16 — 1080 × 1920
Frequently Asked Questions
What is the difference between aspect ratio and resolution?
Aspect ratio describes the proportional relationship between width and height (e.g., 16:9), while resolution refers to the actual pixel dimensions (e.g., 1920×1080). Multiple resolutions can share the same aspect ratio. For example, 1920×1080, 1280×720, and 3840×2160 all have a 16:9 aspect ratio.
Can I use CSS aspect-ratio in all browsers?
The CSS aspect-ratio property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+). For older browsers, you can use the padding-top technique as a fallback, or use a polyfill.
What aspect ratio should I use for Instagram?
For Instagram posts, use 1:1 (square) format with dimensions of 1080×1080 pixels. For Instagram Stories and Reels, use 9:16 (vertical) format with dimensions of 1080×1920 pixels. For Instagram carousel posts, you can use 4:5 (1080×1350) or 1:1 format.
How do I maintain aspect ratio when resizing images?
Use the CSS aspect-ratio property or set both width and height while maintaining the same ratio. For example, if you have a 16:9 image and want to resize it, multiply the width by 9/16 to get the new height, or multiply the height by 16/9 to get the new width.
Is this tool free to use?
Yes, our Aspect Ratio Calculator is completely free to use. There are no registration requirements, no hidden fees, and no limitations on usage. You can calculate aspect ratios and generate CSS code as many times as you need.
More Tools
Discover more free tools to boost your productivity
Gradient
HEX: #ff5733
RGB: 255, 87, 51
HEX: #4a90e2
RGB: 74, 144, 226
Blog Post
Transform your content...
Social Post
