Why Doesn't `object-fit` Work with Flexbox Containers?

Why object-fit Isn't Working in Flexbox

Despite experiencing issues with the implementation of object-fit in flexbox, where images within columns of equal width remain unadjusted, there is a logical explanation rooted in the property's definition.

As outlined in the specification, object-fit dictates how replaced elements (images in this case) fit within the box defined by their height and width. However, the crucial point to grasp is that the box pertains to the image itself, not its container.

Therefore, to resolve the issue, remove the container altogether and assign the flex-item status directly to the images, as demonstrated in the updated code snippet:

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

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

The above is the detailed content of Why Doesn't `object-fit` Work with Flexbox Containers?. For more information, please follow other related articles on the PHP Chinese website!