tomhodgins / aspect-ratio-spec

A spec for an aspect-ratio property in CSS

aspect-ratio-spec

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 staticresource.com/aspect-ratio.html.

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.

aspect-ratio-spec's Issues

Can this be used for images

Just wondering if/how your spec could be used for images.

As in, websites can provide the width/height in the HTML, then override the width in CSS to a percentage value, while using height: auto (so the aspect ratio is maintained).

This might not need to be included in your spec (as the browsers do eventually get to calculate the aspect ratio), but thought I should mention it anyway.

https://crbug.com/732794

As an aside, I like your idea, as I find the padding bottom trick isn't exactly obvious when you want a simple div maintain a certain aspect ratio.

What happens when contents are too large?

Maybe I'm missing something, but I don't see anything in your spec about what happens when the contents of a container with a set aspect-ratio are too large.

Does the container grow to accommodate, or does the content overflow?

I would have expected to see things like min-aspect-ratio and max-aspect-ratio, to handle the various use cases.

Initial value

I would love for something like this to be available. It's infuriating that there's no simple way to get CSS grid cells, for example, to be square, at least not in a way which works in all circumstances.

In the spec the "initial" value is listed as 1/1. Perhaps I don't understand exactly what "initial" means, but it sounds like this would mean all elements start square. Would it make more sense for the initial value to be auto?

Seen this old draft spec?

I came across this. Have you seen it? I haven't been able to find out why it seems to have died. Or maybe it hasn't, but I can't find the later versions or discussion...?

Consider cssdb badge

Hey there. I’m just trying to get the word out that cssdb has badges to help users know the status of your CSS polyfill. Here are 2 ways I’ve seen the badge integrated.

Without a separated citation:

[![CSS Standard Status](https://jonathantneal.github.io/css-db/badge/aspect-ratio.svg)](https://jonathantneal.github.io/css-db/#aspect-ratio)

And with a separated citation:

[![CSS Standard Status][css-img]][css-url]

[css-url]: https://jonathantneal.github.io/css-db/#aspect-ratio
[css-img]: https://jonathantneal.github.io/css-db/badge/aspect-ratio

Either way they look like this:

I see you haven’t added any badges to your project, so you know best if or how you would want to integrate them. Again, I just think it’s helpful to track these things if we’re serious about them becoming or evolving into real web standards.