Skip to content
A spec for an aspect-ratio property in CSS
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


CSS Standard Status

A spec for an Aspect Ratio property in CSS

View online: aspect-ratio.html

View demo: demo.html

What is this about?

This spec aims 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.

Proposed Syntax

div {
  aspect-ratio: 16/9;

View Syntax Example: aspect-ratio.css

Plugin & Demo

As a reference for the syntax described in the spec, I have included a JavaScript plugin that reads the proposed syntax and displays the desired behaviour of the proposed functionality.

View Plugin: aspect-ratio.js

View Demo: demo.html

Who am I?

I'm an independent web developer, not affiliated with any major companies. The research & development contained in this spec is my own.

How you can help

At this stage the work on this spec is focused on specifying the behaviour described in this Github thread as well as the plugin working at

For now, the most productive way to provide input would be by contributing to the conversation in the Gitter chat room for the EQCSS project.

You can’t perform that action at this time.