Aspect ratio calculator

A tool that calculates aspect ratio for the given width and height. Use popular presets or create your own.

Hotkeys

C – copy the result

W – focus on width

H – focus on height

P – focus on presets

Currently disabled. You can enable hotkeys in settings

What is Aspect Ratio?

Aspect ratio refers to the proportional relationship between the width and height of an element: image, video and other. It is expressed as a ratio, typically in the form of width:height.

How to Use `aspect-ratio` CSS Property?

The aspect-ratio CSS property is a relatively new addition to CSS that allows developers to control the aspect ratio of an element. It's particularly useful for controlling the dimensions of elements like images, videos, or containers while preserving their aspect ratio, regardless of their content.

Here are some key points about the aspect-ratio CSS property:

Syntax: the aspect-ratio property accepts a ratio value, which can be either a <number>/<number> or a <number>.
Usage: you can apply the aspect-ratio property to any block-level or replaced element, such as <div>, <img>, or <video>. It's commonly used in responsive web design to maintain consistent aspect ratios across different screen sizes and resolutions.
Benefits: by using the aspect-ratio property, developers can ensure that elements maintain their proportions even if the content changes or if the viewport size is adjusted. This helps prevent content from becoming distorted or stretched, leading to a better user experience.
Fallbacks: while modern browsers support the aspect-ratio property, it's essential to provide fallbacks for older browsers that don't support it. One common approach is to use a combination of padding and percentage widths to achieve a similar effect.

Do all Browsers Support `aspect-ratio` CSS property?

All modern browsers support the aspect-ratio CSS property. This includes recent versions of Chrome, Firefox, Safari and Edge, across both desktop and mobile platforms. However, this property is not supported by the Internet Explorer browser.

Which Browsers Don't Support `aspect-ratio` CSS property?

Only outdated versions of browsers have no support for aspect-ratio CSS property, for example:

Chrome 4-87 (25.01.2010 – 17.11.2020)
Edge 12-87 (29.07.2015 – 20.11.2020)
Safari 3.1-14.1 (18.03.2008 – 26.04.2021)
Safari and other browsers on iOS 3.2-14.8 (03.04.2010 – 26.04.2021)
Firefox 2-88 (24.10.2006 – 19.04.2021)
Opera 10-73 (01.09.2009 – 17.02.2021)
Opera Mobile 12-12.1 (27.02.2012 – 09.10.2012)
IE all versions
Samsung Internet 4-14.0 (19.04.2016 – 16.04.2021)
Android Browser 2.1-4.4.4 (26.10.2009 – 02.06.2014)

When using the aspect-ratio CSS property, it's essential to consider the browser support requirements of your project. If compatibility with older browsers is necessary, you may need to provide fallbacks or alternative styling techniques to achieve similar visual effects. Additionally, testing your website or application across different browsers and versions can help identify and address any compatibility issues related to the aspect-ratio CSS property. Read aspect-ratio specifications below:

MDN: aspect-ratio

Can I use: aspect-ratio

CSS-Tricks: aspect-ratio

W3Schools: aspect-ratio

Why is Aspect Ratio Important?

Aspect ratio plays a crucial role in design, especially in digital media and visual arts. Maintaining the correct aspect ratio ensures that images and videos appear balanced and visually appealing across different devices and screen sizes. The aspect-ratio CSS property is a powerful tool for creating responsive layouts and ensuring consistent visual proportions across different devices and screen sizes.

How to Calculate Aspect Ratio?

To calculate aspect ratio, simply divide the width of the element by its height. For example, if an image has a width of 1200 pixels and a height of 800 pixels, the aspect ratio would be 1200:800, which simplifies to 3:2.

What are Common Aspect Ratios?

Some common aspect ratios include:

4:3 – traditional aspect ratio for standard definition television and computer monitors, , commonly seen in older TVs and computer screens.
16:9 – widely used in HD video and television formats, including streaming platforms like Netflix and YouTube.
21:9 – ultra-wide aspect ratio, popular for cinematic content, offering a more immersive viewing experience in movies and gaming.
1:1 – square aspect ratio commonly used in social media platforms like Instagram for posts and profile pictures.
9:16 – used for social media platforms with vertical content like Instagram reels, TikTok, and YouTube shorts.
3:2 – common aspect ratio for still photography in DSLR cameras, providing a balance between landscape and portrait compositions.