Calculate aspect ratios for images and videos instantly. Get CSS code and dimensions for Instagram, TikTok, YouTube, and all standard aspect ratios.
Live Preview
1920 × 1080
16:9
Width:
1920px
Height:
1080px
Aspect Ratio:
16:9
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
ASPECT RATIO
Decimal: 1.7778
UNIVERSAL RATIOS
X (TWITTER)
YOUTUBE
TIKTOK
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 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).
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.
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.
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.
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.
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; }
Understanding and using the correct aspect ratio is crucial for creating professional-looking content across different platforms and devices. Here's why it matters:
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.
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.
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.
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.
Here are the most commonly used aspect ratios across different platforms and use cases:
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;
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 */
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;
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;
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
Feed Image: 16:9 or 1:1 — 1600 × 900 / 1080 × 1080
Header: 3:1 — 1500 × 500
Thumbnail: 16:9 — 1280 × 720
Shorts: 9:16 — 1080 × 1920
Channel Banner: 16:9 — 2560 × 1440
Videos / Stories: 9:16 — 1080 × 1920
Discover more free tools to boost your productivity
Box
Create beautiful box shadow with our free box shadow css generator. Generate custom box shadow css with 60+ preset effects, live preview & instant Tailwind and CSS box shadow code.
Gradient
Create beautiful gradient background using tailwind CSS Gradient Generator. Use 90+ presets to generate customized tailwind, CSS gradient background code quickly with live preview.
HEX: #ff5733
RGB: 255, 87, 51
HEX: #4a90e2
RGB: 74, 144, 226
Convert HEX color codes to RGB values instantly with our free HEX to RGB converter. Learn how HEX to RGB conversion works, understand color formats, and get accurate RGB values for web development.
Blog Post
Transform your content...
Social Post
Transform any blog post into engaging, platform-optimized content using our Blog to Social Media Post Generator. Powered by AI to maintain your message while adapting tone and style.
Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.
© 2025 FrontendGeek. All rights reserved
