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
And my sample code looked like this:
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.