Why isn’t object-fit working in flexbox?

by

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;
  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. With this option, 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 may result in whitespace on the left and/or right (portrait fit), or top and/or bottom (landscape fit). The object-position property can be used to shift the image within its box.

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:

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. Flex / Grid layouts not working on button or fieldset elements
  3. How do I keep two side-by-side div elements the same height?
  4. How to disable equal height columns in Flexbox?
  5. Proper use of flex properties when nesting flex containers
  6. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  7. Remove space (gaps) between multiple lines of flex items when they wrap
  8. Equal height columns with CSS
  9. Absolutely positioned flex item is not removed from the normal flow in IE11
  10. Make flex items take content width, not width of parent container
  11. Using flex order property to re-arrange items for desktop and mobile views
  12. flex container min-height ignored in IE
  13. Properly sizing and aligning the flex item(s) on the last row
  14. Maintain image aspect ratio when changing height
  15. float does not work in a flex container
  16. Flexbox not giving equal width to elements
  17. Why does percentage padding break my flex item?
  18. flex-grow not working in column layout
  19. Why does flexbox stretch my image rather than retaining aspect ratio?
  20. How to center-align one flex item and right-align another using Flexbox [duplicate]
  21. How to make a sticky footer using flexbox in IE11?
  22. Height of flex container not working properly in Safari
  23. Why is there vertical scroll on the main container?
  24. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  25. How can I create a row-based masonry layout using CSS?
  26. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  27. How do I make flex box work in safari?
  28. Zebra striping a flexbox table with wrapping items
  29. Element with “display: inline-flex” has a strange top margin
  30. Sizing flex items on the last row

Leave a Comment