为什么'object-fit”不能与 Flexbox 容器一起使用？

为什么 object-fit 在 Flexbox 中不起作用

尽管在 Flexbox 中实现 object-fit 时遇到了问题，其中的图像等宽的列保持不变，有一个根植于属性定义的逻辑解释。

如规范中，object-fit 规定了替换元素（在本例中为图像）如何适合由其高度和宽度定义的框。然而，要掌握的关键点是，盒子属于图像本身，而不是其容器。

因此，要解决此问题，请完全删除容器并将弹性项目状态直接分配给图像，如更新的代码片段所示：

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

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

以上是为什么'object-fit”不能与 Flexbox 容器一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！