• General info
• Display aspect ratio
• Technologies
• Demo
• Resources

In mathematics, a ratio indicates how many times one number contains another. For example, if there are eight oranges and six lemons in a bowl of fruit, then the ratio of oranges to lemons is eight to six (that is, 8∶6, which is equivalent to the ratio 4∶3). Similarly, the ratio of lemons to oranges is 6∶8 (or 3∶4) and the ratio of oranges to the total amount of fruit is 8∶14 (or 4∶7).

The numbers in a ratio may be quantities of any kind, such as counts of people or objects, or such as measurements of lengths, weights, time, etc. In most contexts, both numbers are restricted to be positive.

A ratio may be specified either by giving both constituting numbers, written as a to b or a∶b, or by giving just the value of their quotient a/b. Equal quotients correspond to equal ratios.

Consequently, a ratio may be considered as an ordered pair of numbers, a fraction with the first number in the numerator and the second in the denominator, or as the value denoted by this fraction. Ratios of counts, given by (non-zero) natural numbers, are rational numbers, and may sometimes be natural numbers. When two quantities are measured with the same unit, as is often the case, their ratio is a dimensionless number. A quotient of two quantities that are measured with different units is called a rate.

We use the ratio formula while comparing the relationship between two numbers or quantities. The ratio is defined as the relation between the quantities of two or more objects and it indicates the amount of one object contained in the other. The general form of representing a ratio of two quantities say a and b is

a : b

where,

a = Antecedent

b = Consequent

The aspect ratio of a display device is the proportional relationship between the width and the height of the display. Common aspect ratios for displays, past and present, include 5:4, 4:3, 16:10 and 16:9.

Aspect ratio 📐 4:3

Example resolutions 💻 1024×768, 1600×1200

Notes 📝 common until 2003, matches the aspect ratio of analogue TV, non-widescreen SDTV and early 35 mm film

🚩🚩🚩🚩🚩

Aspect ratio 📐 5:4

Example resolutions 💻 1280×1024

Notes 📝 common until 2003

🚩🚩🚩🚩🚩

Aspect ratio 📐 3:2

Example resolutions 💻 2160×1440, 2560×1700†

Notes 📝 used in some portable PCs since 2013

🚩🚩🚩🚩🚩

Aspect ratio 📐 16:10

Example resolutions 💻 1280×800, 1920×1200

Notes 📝 common between 2003 and 2010

🚩🚩🚩🚩🚩

Aspect ratio 📐 16:9

Example resolutions 💻 1366×768†, 1920×1080

Notes 📝 common since 2008, matches the aspect ratio of HDTV and widescreen SDTV

🚩🚩🚩🚩🚩

Aspect ratio 📐 ~17:9

Example resolutions 💻 4096×2160

Notes 📝 Digital Cinema Initiatives standard for 4K resolution; specification created in 2005 but not widely sold until 2014–15

🚩🚩🚩🚩🚩

Aspect ratio 📐 ~21:9

Example resolutions 💻 2560×1080†, 3440×1440†

Notes 📝 used in some professional and gaming displays since 2015, roughly matches various anamorphic formats

🚩🚩🚩🚩🚩

Aspect ratio 📐 32:9

Example resolutions 💻 3840×1080, 5120×1440

Notes 📝 used in some high-end displays since 2017

🚩🚩🚩🚩🚩

Aspect ratio 📐 1:1

Example resolutions 💻 1920×1920

Notes 📝 used in some desktop and professional monitors

🚩🚩🚩🚩🚩

Aspect ratio 📐 4:1

Example resolutions 💻 17280×4320

Notes 📝 used in some advertisement displays

🚩🚩🚩🚩🚩

† The resolution doesn't match the aspect ratio exactly, but is commonly marketed or described as such.

• HTML5
• CSS3
• JavaScript (ES6+)

• see here

• CanIUse: aspect-ratio
• MDN: aspect-ratio
• The NEW CSS aspect ratio property
• CodyHouse: Aspect Ratio in CSS
• tecmath: Ratios Introduction - what are ratios?
• Don't Memorise: What is a Ratio? | Proportion and Ratios
• Khan Academy: Introduction to ratios | Ratios, proportions, units, and rates
• Math is Fun
• Ratio Formula