What is the difference between using aspect-ratio and setting width: 100% and height: 100%
Hello guys, can someone explain what is the difference between aspect-ratio compare to the use of width and height set to 100% please; I notice that using height set to 100% instead of using aspect-ratio on img tags, cause overflow in one of my project but I don't understand why; from what I know, the images I use are all of different dimensions and so some fit well while others overflow
3 Replies
Hopefully this helps to explain aspect ratio.
You can see at first a have a fixed height of 700px. As screen gets smaller, the width of element gets smaller, but the height remains the same. but when we use aspect-ratio property. the height changes as the box gets smaller to always maintain the same aspect ratio
Btw, if you really wanna know all about aspect ratio, you can read the wiki post about aspect ratio
https://en.wikipedia.org/wiki/Aspect_ratio_(image)
Yeah, that's not CSS Related. But it works the same as it does in CSS. So if you just understand how aspect ratio works, you understand what it does in CSS
Aspect ratio (image)
The aspect ratio of an image is the ratio of its width to its height. It is expressed as two numbers separated by a colon, width:height. Common aspect ratios are 1.85:1 and 2.40:1 in cinematography, 4:3 and 16:9 in television, and 3:2 in still photography.
Yep, I have a clearer idea now, thanks !!