CSS Aspect Ratio

A presentation at Web Directions hover by Anton Ball

CSS Aspect Ratio Anton Ball ● Web Directions Hover 2021 antonjb

CSS Aspect Ratio antonjb

600 800 antonjb

3 4 antonjb

4:3 width height antonjb

1:1 antonjb

4:3 antonjb

16:9 antonjb

1.6180:1 antonjb

The Problem antonjb

antonjb

antonjb

antonjb

antonjb

What we do now antonjb

56.25% Padding Top Hack antonjb

antonjb

FitVids

Yesssss! Soon I will be released from my Open Source prison! FitVids Seeing it working in Edge Dev 89 (M1) as well. Dave Rupert @davatron5000

aspect-ratio antonjb

aspect-ratio: auto | <ratio> property value antonjb

aspect-ratio: 16 / 9 antonjb

Padding Top Hack .16-9-container { position: relative; width: 100%; padding-top: 56.25%; } .content { position: absolute; top: 0; } Aspect Ratio .16-9-container { width: 100%; aspect-ratio: 16 / 9; } antonjb

iframe { width: 100%; aspect-ratio: 16 / 9; } https://codepen.io/antonjb/pen/xxgbxEq antonjb

.grid-item { aspect-ratio: 4 / 3; } https://codepen.io/antonjb/pen/Jjbzzgb antonjb

.square { width: 20vw; aspect-ratio: 1; } https://codepen.io/antonjb/pen/LYbvQVr antonjb

Intrinsic Aspect Ratio antonjb

iframe video embed img antonjb

img, input[type=”image”], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio antonjb

https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes antonjb

Preferred Aspect Ratio antonjb

“ The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio antonjb

“ The width CSS property sets an element’s width. https://developer.mozilla.org/en-US/docs/Web/CSS/width antonjb

“ Maybe it’s helpful to think of aspect-ratio as the weakest way to size an element? Chris Coyier @chriscoyier https://css-tricks.com/a-first-look-at-aspect-ratio/ antonjb

800 width: 800px; aspect-ratio: 4 / 3; ? .container { 4:3 } antonjb

800 width: 800px; height: 600px; aspect-ratio: 16 / 9; 600 .container { 16:9 } antonjb

800 max-width: 800px; height: 600px; aspect-ratio: 16 / 9; 600 .container { 16:9 } antonjb

.element { .element { width: 20vw; width: 20vw; aspect-ratio: 16 / 9; min-height: 0; } aspect-ratio: 16 / 9; } https://codepen.io/antonjb/pen/zYoXRNR antonjb

layout.css.aspect-ratio.enabled https://caniuse.com/mdn-css_properties_aspect-ratio antonjb

Safari Technical Preview 118 is out… My new favorite CSS property on this list. !”# ASPECT-RATIO! Jen Simmons @jensimmons https://twitter.com/jensimmons/status/1347287421633892356 antonjb

Web Compat 2021 https://web.dev/compat2021/ antonjb

@supports (aspect-ratio: 1 / 1) { .16-9-element { aspect-ratio: 16/9; } } antonjb

CSS Aspect Ratio antonjb

Thank you antonjb

Anton Ball
@antonball

1 / 44

Have you needed to maintain an aspect ratio in a layout? Perhaps 16:9 for a video or a 4:3 photograph. Was it more work than you would have thought? There’s JavaScript solutions or the Padding-Top hack that work, but there are sacrifices to these workarounds.

The frustration of maintaining a consistent width-height ratio is about to be solved with modern browsers supporting the CSS Aspect Ratio property. In this talk we look at what aspect ratio is, how we can use it in our code and the problems it’ll solve.