Object-fit not affecting images

Question

I\'ve been trying to use object-fit on a few images placed inside article elements, but it doesn\'t seem to affect them at all.

The desired

Answer 1

Here's what is says in the spec:

5.5. Sizing Objects: the object-fit property

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

I focused on... fitted to the box established by its used height and width.

So I added height and width attributes to your img elements, and it seems to work now.

Revised Codepen

To remove the tiny line of whitespace under each image, add vertical-align: bottom to the img. For an explanation see here: Mystery white space underneath image tag

As a side note, you may want to consider browser support for:

1. object-fit (no IE support)
2. main (no IE support)
3. flexbox (consider prefixes)