How to Define Aspect Ratio in CSS

Instead of defining the size of an element using the with and height properties. CSS also allows you to define its aspect ratio. For example,

1<img src=". . ." alt="Image" />

1img {
2  border: solid 1px;
3  width: 200px;
4
5  aspect-ratio: 16 / 9;
6}

In this case, the image is set to be 200px wide, and instead of specifying the height, we defined the aspect ratio to be 16:9. The browser will automatically calculate the height based on the ratio.