Harangue Harangue - 6 months ago 116
HTML Question

Why isn't object-fit working in flexbox?

I have several columns that I am giving equal width using flex. Each contains

img
tags, and I'd like those images to exhibit the
object-fit: cover
sizing.

.container {
display: flex;
flex-direction: row;
width: 100%;
}

.test {
flex: 1;
overflow: hidden;
height: 400px;
}

img {
object-fit: cover;
}


The images are not resizing, as can be seen in this demo. Why is that?

Answer

From the specification:

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.

The key term being: fitted to the box established by its used height and width

The image gets replaced, not its container. And the box established by its used height and width relates to the image itself, not its container.

So, scrap the container and make the images themselves the flex items.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover; /* also try `contain` and `fill` */
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Revised Codepen


Additional Details

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.

Here are three of the values:

  • cover

    The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.

  • contain

    The replaced content is sized to maintain its aspect ratio while fitting within the element's content box.

  • fill

    The replaced content is sized to fill the element's content box.

With cover the image retains its aspect ratio and covers all available space. Of course, this means that much of an image may be cropped off-screen.

With contain the aspect ratio is also maintained, but the image scales to fit within the box. This means that an image may have whitespace on the left and right, or top and bottom.

With fill the aspect ratio is abandoned and the image is sized to fit the box.


Browser Compatibility

As of this writing, object-fit is not supported by Internet Explorer. For a workaround see:

Comments