Expectations of the Aspect Ratio Box - The Sequel
Yesterday I wrote a post outlining some thoughts I had with regards to a few questions on Twitter with regards to image sizing and the aspect ratio CSS property. Based on some feedback from @fantasai, I learned that my interpretation was wrong.
It's a good thing I put that disclaimer up on the top of the post.
Let me try again.
The questions from @fantasai and @LeaVerou were:
If you assigned a 200px by 100px JPEG an `aspect-ratio` of 1:1...
— fantasai (@fantasai) January 15, 2021
... how would you expect the browser to size that out?
If you assigned a 200px by 100px JPEG an `aspect-ratio` of 1:1, what size would you expect the resulting image to be?
— Lea Verou (@LeaVerou) January 16, 2021
cc @fantasai
And my sample code looked like this:
<img src="path/to/my/image.jpg" width="200" height="100" alt="some descriptive text of the image" />
img {
aspect-ratio: 1:1;
}
I assumed that the image would be 200x200 due to the aspect-ratio
and default values for the object-fit
property. However, this is incorrect. fantasai explains:
Unless you set width/height to auto in your CSS, that will render as 200x100. Because the width/height attributes in HTML get mapped to 'width: 200px; height: 100px' in the CSS and explicit width/height always wins.
— fantasai (@fantasai) January 17, 2021
So if you explicitly set the dimensions of an image (as I did in my example), that will take precedence over the aspect-ratio. Both the box and the image itself will be the size defined by the explicit height/width.
If I removed the height/width attributes from the HTML in my example or set the height/width to auto in the CSS as fantasai mentioned, then I would expect the image to render as I described in the previous post.
Thanks to fantasai for taking the time to read my post and explain/correct me on the details.