The NEW CSS aspect ratio property

preview_player
Показать описание
CSS has a fairly new property called aspect-ratio which has started to be available in the browsers. Albeit behind a support flag in Firefox.
This new property opens up new layout possibilities as well as helping to maintain image aspect ratios.

  1. Steve Griffith - Prof3ssorSt3v3
  2. MAD9013
  3. MAD9014
  4. MAD9022
  5. web development
  6. JavaScript
Рекомендации по теме
The NEW CSS 0:07:15

The NEW CSS aspect ratio property

This New CSS 0:00:55

This New CSS Property Gets Perfect Aspect Ratios Every Time

How to use 0:01:28

How to use CSS aspect-ratio

Unlock the Power 0:01:00

Unlock the Power of CSS Aspect Ratio for Responsive Designs

The NEW CSS 0:00:52

The NEW CSS aspect ratio property #shorts #css #html

A Practical Guide 0:10:20

A Practical Guide to Aspect Ratio in CSS

The CSS aspect-ratio 0:02:56

The CSS aspect-ratio property

The NEW Aspect 0:31:00

The NEW Aspect Ratio CSS property Deep Dive & Alternatives

3 Trucos IMPRESIONANTES 0:10:59

3 Trucos IMPRESIONANTES de CSS

CSS Aspect Ratio 0:10:42

CSS Aspect Ratio - Practical Example

23 CSS features 0:31:31

23 CSS features you should know (and be using) by now

Stop Making This 0:00:50

Stop Making This CSS Height Mistake

aspect-ratio CSS property 0:00:13

aspect-ratio CSS property 🤩

CSS aspect-ratio for 0:00:59

CSS aspect-ratio for auto sizing and layout

Chrome 88 adds 0:05:31

Chrome 88 adds aspect-ratio and 2 awesome new devtool features!

Aspect Ratio in 0:00:08

Aspect Ratio in CSS #codewith_muhilan #css #coding

Aspect-ratio property in 0:00:09

Aspect-ratio property in CSS ✨

21- CSS aspect-ratio 0:05:10

21- CSS aspect-ratio Property | Learn CSS

CSS - aspect-ratio 0:00:16

CSS - aspect-ratio

CSS Tips & 0:07:10

CSS Tips & Tricks: Element with fixed aspect ratio

Aspect-ratio property in 0:00:08

Aspect-ratio property in CSS

Aspect Ratio Hack 0:01:39

Aspect Ratio Hack - Supercharged

Using Aspect-ratio In 0:04:21

Using Aspect-ratio In Reponsive CSS | CSS Tutorial

CSS: свойство aspect-ratio 0:00:48

CSS: свойство aspect-ratio

Комментарии
Автор

thanks for your explanation, sort out the doubt ^^, love your contents

umarmuzammil
Автор

Another excellent video. Thanks Steve. See you soon!

CodingNuggets
Автор

Nice tutorial.
If needed we can use variables instead of attributes and it's work :
<p style="--ratio-w: 1; --ratio-h: 3">

aspect-ratio: var(--ratio-w) / var(--ratio-h);

papadong
Автор

geezlus, another one... trying to fix something and you're the first meaningful result

vizunaldth
Автор

Very good!!....thank
I made a custom video component ( webComponent ) and i spent days to find a solution to keep the video aspect ratio when resizing the window.
I wanted my vidéo screen to always be 16/9 and any kind of video format could fit in it ( 1.33 1.66 1.77 1.85 2.35 horizontal vertical orientation etc....)
It works now but my code is to complicated.
Do you have a good solution to solve this 16/9 video screen containing any video format?
Thanks again for this tip and as always thanks for teaching!!

jeanmarcpourchel
Автор

Ever thought about making a video about node.js websocket handshake?

gledianlalushllari
Автор

Hey Steve, could you make videos for making the site responsive and media-queries, im having hard time while making sites responsive

suatbayrak
Автор

I don't understand why someone would ever want to do this. You said it's used to hold the space for the image or other elements, but why would I bother if the space will be given to the image and the other elements anyways after the site finishes reloading?

enriquesneffels
Автор

What if you want to perserve space on the screen for an image which you don't know the height and width of? How would you do this in a big website with lots of images all different sizes?

mractorbanner
Автор

When I set width and height in the image, the aspect ratio is set for me automatically, i dont need to add aspect-ratio: .., is it supposed to be like that ?

radoslavtsanev