The CodePen doesn't show the avatars with the correct aspect ratio in Firefox. Not sure why since both object-fit and aspect-ratio are supposed to be fully supported in Firefox. I'm using macOS.
Link to content: Unleashing the Power of CSS - Section 1
Moderator note: for those not able to access the Premium content, the post is referring to this public Pen:
Thanks for your post, @leehsueh7. Yes, that’s interesting. FF definitely does support aspect-ratio, so it’s interesting that this demo isn’t working the same as in other browsers:
It does work if you add height: 100% to the image. (I just wonder why it works without this in other browsers.)
This is a good question for @PaulOB 
It’s basically the age old problem of images and percentages mixed together plus the added problem of an image that has no size in css or html. there were many bugs with aspect ratio but I think most should be fixed by now.
You should always force the issue with a width and height in the css and the original width and height attributes in the image tag for best results. If you do all that you will find that it rarely goes wrong. (The specs actually say that where a parent depends on its childs width but the child’s width is a percentage of the parent then the result is undefined. This is not quite the case here but similar in some respects :)).
If you force the issue with a percentage width and height of 100% everyone should be happy.
avatar-list img {
/* Make it a square */
aspect-ratio: 1;
/* Fit the image to it's container without distortion */
object-fit: cover;
/* Make the square round */
border-radius: 50%;
width:100%;
height:100%;
}
Note that if you leave out the width and the actual image dimensions are smaller than the available space the design will break.
Therefore use both width and height as in the above snippet.
The fact that some browsers can manage ok without is probably just down to their algorithms as I don’t believe it’s an error as such. The specs also say that aspect ratio sets a preferred aspect ratio but should not over-ride a dimension which is what may be happening to the image.
Thank you all for helping to answer this!
No worries. Thanks for asking the question! The Pen has been updated now, too. 