Aspect Ratio

A Collection of Interesting Ideas, 25 May 2017

To the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. In addition, as of 25 May 2017, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0. Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.

Abstract

The aspect-ratio property in CSS allows authors to define an aspect ratio for an element. The goal of this document is to define the syntax and functionality of a new aspect-ratio property for a CSS to allow CSS authors to describe the desired aspect-ratio of an element, unless a more specific width and height are assigned.

1. Aspect Ratio Syntax

Name:	aspect-ratio
Value:	<ratio>
Initial:	1/1;
Applies to:	block elements
Inherited:	no
Percentages:	n/a
Media:	visual
Computed value:	specified value
Canonical order:	per grammar
Animation type:	discrete

The aspect-ratio property is a property for CSS that allows you to define a desired aspect ratio for an element using the <ratio> value, a width and height separated by a slash character (/).

Example aspect-ratio syntax

aspect-ratio: width / height ;

Example aspect-ratio property

div {
  aspect-ratio: 4/3;
}

2. Calculating Aspect Ratio

The aspect-ratio will calculate the desired height, or calculate nothing at all based on which properties are defined for an element.

Aspect-Ratio	Width	Height	Calculated Property
✓			Height
✓	✓		Height
✓		✓	None
✓	✓	✓	None
✓ !important	✓	✓	None

2.1. If aspect-ratio is defined

If the element has a defined aspect-ratio and does not have a defined width, the height will be calculated based on the element’s width on the page and the <ratio> defined by the property.

Example with aspect-ratio

div {
  aspect-ratio: 16/9;
}

In this case an element that displayed 1000px wide on the screen would have a calculated height of 1000 / (16/9) which would result in a height of 562.49px.

2.2. If aspect-ratio and width are defined

If the element has a defined aspect-ratio and width and does not have a defined height, the height will be calculated based on the element’s defined width and the <ratio> defined by the property.

Example with defined width

div {
  width: 200px;
  aspect-ratio: 16/9;
}

In this case an element has a specified width of 200px so the height will be calculated as 200 / (16/9) which would result in a height of 112.49px.

2.3. If aspect-ratio and height are defined

If the element has a defined aspect-ratio and height and does not have a defined width, the specified dimensions will override the aspect-ratio.

Example with defined height

div {
  height: 200px;
  aspect-ratio: 16/9;
}

In this case an element has a specified height of 200px so nothing will be calculated according to the defined aspect-ratio.

2.4. If aspect-ratio and width and height are defined

If the element has a defined aspect-ratio and width and height, the specified dimensions will override the aspect-ratio.

Example with defined width and height

div {
  width: 200px;
  height: 200px;
  aspect-ratio: 16/9;
}

In this case an element has a specified width of 200px and a specified height of 200px, so neither property will be calculated according to the defined aspect-ratio.

2.4.1. If !important is defined

Note, even !important won’t override a defined width and height

Example aspect-ratio with important defined

div {
  width: 200px;
  height: 200px;
  aspect-ratio: 16/9 !important;
}

In this case an element has a specified width of 200px and a specified height of 200px, so even with !important nothing will be calculated according to the defined aspect-ratio.

Conformance

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Property Index

Name	Value	Initial	Applies to	Inh.	%ages	Media	Animation type	Canonical order	Computed value
aspect-ratio	<ratio>	1/1;	block elements	no	n/a	visual	discrete	per grammar	specified value