Html 按最小内容划分包装宽度

我和物品排成一行。每个项目都包含标题、图像和按钮。图像保持其纵横比。 我不明白为什么要添加空白

沙箱：

现在结果：

预期结果：

代码：

删除此行：

.items {
align-items: flex-start;
}

您所做的是告诉items元素将图像推送到其父容器列的开头。将宽度的其余部分留作空白

要解决图像大小溢出其容器的问题，请将最大高度设置为.items div:

.items{
  max-height: 95%;
}

然后将图像设置为高度不大于导致图像溢出的高度：

img {
  max-height: 140px;
  object-fit: contain;
}

---

删除

对齐项：flex start并添加
对象匹配：封面；物体位置：顶部
对于img，我得到了这样一个结果：图像不一致。与“预期结果”不匹配我已编辑我的帖子以解决您遇到的问题。我的回答是直接回答您关于flex对齐所创建的额外空间的问题。为我辩护，我没有继续为你完成工作，因为那不是要求的。如果你否决了我的回答，我会恳请你改变主意。谢天谢地，魔法数字，恒定大小的糟糕解决方案。。。另外，我不认为downvoteIt不是一个理想的解决方案，不。但问题是你有不同纵横比的图像。因此，如果您将一组css样式应用于所有图像，它将不会像您的“预期结果”那样工作。您可以期望图像的原始大小会在固定的“面板”容器外展开，或者必须根据固定的宽度或高度将其设置为相同的比例：结果：图像交叉。与“预期结果”不匹配这不提供问题的答案。一旦你有足够的钱，你将能够；相反因为图像的大小不同，所以如果不裁剪并填充整个空白，就无法显示图像。
flex-direction:column这将考虑高度，并将宽度设为一个变量，因为它会重新计算FF，而不是因为它可能导致无限循环，问题是这三个元素中的哪一个应该定义
。item
？因为现在它是最大的项目，在调整大小之前是图像，这就是为什么有剩余的空格定义宽度。项目应该最大宽度（标题或图像或BTN）。我明白你在说什么。在图像缩尺缩小后，我怎么能强迫计算宽度？它不能是max图像，因为浏览器只考虑第一个大小，在使用之前，你必须自己调整图像大小，并且不能强迫在FF中计算。在chrome中，如果需要，可以使用动画1）mb，如果在img属性中设置原始大小宽度\高度，可以吗？它可以帮助浏览器正确计算for.item吗？2） 你能修复我在chrome中工作的例子吗（“chrome如果需要，你可以使用动画来完成”），它在WindowsChrome83（64位）中已经可以很好地为我工作了
.items{
  max-height: 95%;
}

img {
  max-height: 140px;
  object-fit: contain;
}