How To Use Aspect Ratio In CSS - Aspect Ratio In CSS Tutorial

Описание: How to Use CSS3 Aspect-Ratio | How to Set Aspect Ratio In CSS
I have explained the aspect ratio property in CSS in simple language, After watching this video, you will be able to use the aspect-ratio property in CSS effortlessly, without further ado, let's get into it.
So What is Aspect-Ratio in CSS? According to W3schools "The aspect-ratio property allows you to define the ratio between width and height of an element." In other words, You can easily control the width or height of an element using the aspect ratio property, Say, you want the width of an element to be variable while the height increase or decreases based on the width. This is where the aspect ratio in CSS comes in. Let us see an example, but before I do that let me give you a brief about aspect-ratio syntax, aspect-ratio: number (width)/number (height), So the first value represents the width and the second value represents height.

So, Here I have a div with an id "demo-div", I have set the width and height of that div to 400px, Now what I will do is, remove the height and use the aspect ratio property instead, let's remove it and add the aspect ratio, I have set the aspect-ratio to 1 / 1 (or 1 by 1), Here is an interesting thing to note, the aspect ratio property will take the 400px as it's the first value and the height is also the same. If I want to change the height to 800px which is 400 multiplied by 2, then I will set the aspect ratio to 1 / 2 or 1 to 2, Again if you want the height to be 1200px then you have to set it to 1 / 3. and so on.
You can also use hard-coded values for height and use the aspect ratio property to define the width. In other words, to double the width use 2 / 1, to triple the width use 3 / 1. One more thing, the aspect-ratio property will not work if you set both height and width for an element. Needless to say, If you're using aspect-ratio property, then you should use % rather than px or any other units.

Now, what if you don't specify the height or width, like here I didn't specify any of them (width or height), Guess what will happen?
if you set aspect-ratio: 1 / 1 without providing height or width, then the element or div width and height will become 100% or auto as you can see. The height will increase alongside the width. In other words, equal height and width, if the aspect ratio is 1 / 1. That's it.

Chapters -
0:00 Intro
0:16 Basics Of Aspect Ratio
0:30 A-Ratio Overview
0:50 Aspect Ratio Syntax
1:00 Coding & Explanation