CSS Aspect Ratio

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