html - 试图了解图像裁剪的对象拟合

Question

代码沙箱上的简单代码，它比较了我正在构建的两张卡。第一张卡片只是一个占位符，用于组织 flexbox 和配置悬停效果。第二个确实提到了图像。

我试图理解为什么图像变得比第一个父母限制的盒子大 - 因为我使用的是object-fit: cover. 谁能解释我为什么？

标签： htmlcss

Answer 1

我明白发生了什么。FlexBox 和图像有时会很奇怪。但这很奇怪，因为有很多参数需要跟踪，而不是因为它是一个损坏的功能。

进入 Firefox 开发工具，我看到第二张卡的标题被其最小尺寸限制，因为 flexbox 中的默认配置是“一个 flex 项目不能小于其内容沿主轴的尺寸”。

img 元素对我的 flexbox 列轴说：“嘿，我需要更多空间”，所以我的 flexbox 说：“当然”。现在，放入头类：

min-width: 0;
min-height: 0;
overflow: hidden;

我的 flexbox 回答：“对不起，但在这里我们可以超出最小尺寸。处理它”。

这个链接有助于理解这一点。