⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
Definition
Aspect ratio is the proportional relationship between an image's width and height, expressed as two numbers separated by a colon. Common aspect ratios include 16:9 (widescreen video), 4:3 (classic TV/photos), 1:1 (square), and 3:2 (DSLR photos).
Different media and platforms favor different aspect ratios. 16:9 is the standard for video (YouTube, TV, monitors). 9:16 is the vertical video standard (TikTok, Instagram Reels, YouTube Shorts). 1:1 (square) is used for Instagram feed posts and profile pictures. 4:5 (1080x1350) is Instagram's portrait format. 3:2 is the native ratio of most DSLR cameras. 4:3 is the iPad screen and traditional TV ratio. 21:9 is ultra-widescreen cinema.
CSS provides the aspect-ratio property (e.g., aspect-ratio: 16/9) that maintains an element's proportions as its size changes. This is essential for responsive design — it prevents layout shift when images or videos load by reserving the correct amount of vertical space. Before this property existed, developers used the "padding hack" (padding-top: 56.25% for 16:9) which was less intuitive. Modern frameworks and CMS platforms use aspect ratio to generate responsive image containers automatically.
When resizing an image to a different aspect ratio, content must be cropped. Understanding aspect ratios helps you plan compositions that work across multiple crops — a landscape photo at 3:2 that needs to be posted as a 1:1 square on Instagram will lose significant horizontal content. Some photographers compose with multiple crops in mind, keeping the subject centered. Image editing tools with aspect ratio crop presets make this process straightforward.