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...
... how would you expect the browser to size that out?

— fantasai (@fantasai) January 15, 2021

If you assigned a 200px by 100px JPEG an `aspect-ratio` of 1:1, what size would you expect the resulting image to be?

cc @fantasai

— Lea Verou (@LeaVerou) January 16, 2021

And my sample code looked like this:

            
                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.