Shaun Rashid
Web Developer

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:

And my sample code looked like this:

HTML for Image
<img src="path/to/my/image.jpg" width="200" height="100" alt="some descriptive text of the image" />
CSS for 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:

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.

Return to Homepage