adding
explicit aspect ratios
to CSS
Jen Simmons * CSS Working Group Meeting * October 2018

https://drafts.csswg.org/csssizing-4/#ratios

reality
width: 100%;height: auto;

Some elements have an
intrinsic height, width,and aspect ratio.
<img><video><img width=1536px height=1024px >problemSome elements do not havean intrinsic aspect ratio.
<iframe><article><div>usecase 1: video<iframe width="560" height="315"src="https://www.youtube.com/
embed/0Gr1XSyxZy0"
frameborder="0" allow="autoplay;
encrypted-media"
allowfullscreen></iframe>

Why?
Adaptive Bitrate StreamingAspect ratio is not maintained in a
flexible context.

solution

aspect-ratio: 16 / 9;

width: 100%;height: auto;

Some way to explicitly
define an aspect ratio forreplaced elements that
don’t have an intrinsic
aspect ratio — so thatthey behave like replaced
elements that do.

CSS Sizing Level 4 Draft

usecase 1: video<iframe width="560" height="315"src="https://www.youtube.com/
embed/0Gr1XSyxZy0"
frameborder="0"></iframe>
iframe {aspect-ratio: 16 / 9;
width: 100%;height: auto;}before you bike shed `aspect-ratio: 16 / 9;`Media Queries Level 4@media (aspect-ratio: 16 / 9) {...
}

usecase 2: boxes<article><h2>Title of event</h2><p>More stuff…</p></article>
Desire — to get a square
most of the time. Unlessthere’s too much content,
then the box should grow.

usecase 2: teaser boxes
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.

Lorem ipsum dolor sit
amet. Duis massa lorem,
faucibus lorem suscipit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Duis massa
lorem, faucibus a suscipit
at, fermentum eget magna.
Quisque id ligula viverra
sem accumsan feugiat.

Lorem ipsum dolor sit.

article {aspect-ratio: 2 / 1;
width: 100%;height: auto;}usecase 2: teaser boxes
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.

Lorem ipsum dolor sit
amet. Duis massa lorem,faucibus lorem suscipit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Duis massa
lorem, faucibus a suscipit
at, fermentum eget magna.
Quisque id ligula viverra
sem accumsan feugiat.

Lorem ipsum dolor sit.

CSS Sizing Level 4 Editor’s Draft

solution A
Lorem ipsum dolor sit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Duis massa
lorem, faucibus a suscipit
at, fermentum eget magna.
Quisque id ligula viverra
sem accumsan feugiat.

article {aspect-ratio: 2 / 1;
width: 100%;height: max-content;
min-height: from-ratio;}CSS Sizing Level 4 Editor’s Draft

solution B
Lorem ipsum dolor sit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Duis massa
lorem, faucibus a suscipit
at, fermentum eget magna.
Quisque id ligula viverra
sem accumsan feugiat.

article {width: 100%;min-height: .5ar;}(After this presentation `ar` was renamed to `tr`pending a better idea. https://github.com/w3c/csswg-drafts/issues/3225 )CSS Grid Level 2 Working Draft

usecase 3: mixed aspect ratio<iframe width="560" height="315"
src=“youtube.com/embed/0Gr1XSyxZy0"></iframe>
iframe {aspect-ratio:attr(width px) / attr(height px);
width: 100%;height: auto;}usecase 3: performance<img width="560" height="315"
src=“example.com/foo.jpg” />img {aspect-ratio:attr(width px) / attr(height px);}
Perhaps add this to the UA default
style sheet to avoid the need forextra reflows. (Issue 4 in draft spec)https://github.com/w3c/csswgdrafts/issues/333