Html 当网格项的高度/宽度设置为100%时，为什么img标记在其单元格'；设置了fr单位吗？

下面的代码片段似乎表明，对于作为网格项（GI）的

img

标记，当其单元格的尺寸以

fr

单位指定时，其包含的块似乎不是其“单元格”。当其单元格的维度在

%

中指定时，它似乎尊重其容器（其单元格）。我在这里偶然发现的规则到底是什么？人们是如何处理的？不要使用

fr

单位来指定属于

img

的GIs单元

img{
对象匹配：包含；
身高：100%；
宽度：100%；
}
#网格容器1{
显示：网格；
高度：10vh；
边框：点着1px粉红色；
网格模板柱：1fr 1fr；
网格模板行：100%；
}
#网格容器2{
显示：网格；
高度：10vh；
边框：点着1px粉红色；
网格模板柱：1fr 1fr；
网格模板行：1fr；
}

---

我在上找到了资源

这是因为

flex

或

grid

项的

minimimum width

是自动的，因此它占用的空间与其最小宽度相同

我不能保证我会100%准确地解释这件事，但是我 理解它，网格列的最小宽度是自动的。（相同 顺便说一句，对于flex项目也是如此。）

通过设置网格元素子元素的

min-width

和

min-height

可以轻松解决此问题

img{
对象匹配：包含；
身高：100%；
宽度：100%；
}
#网格容器1{
显示：网格；
高度：10vh；
边框：点着1px粉红色；
网格模板列：50%50%；
网格模板行：100%；
}
#网格容器2{
显示：网格；
高度：10vh；
边框：点着1px粉红色；
网格模板柱：1fr 1fr；
网格模板行：1fr；
}
#网格容器1>*，
#grid-container2>*{/*此选择器*/
最小高度：0；
最小宽度：0；
}

---

与百分比和像素单位不同，

fr

单位不代表长度

它代表自由空间

它也是渲染过程中最后计算的。（显然，在呈现所有内容之前，无法知道可用空间。）

嗯，这些图像是巨大的（3955x2966），首先渲染

最后，没有可用空间，因此

fr

单元没有效果

使用百分比，您实际上设置了一个长度，因此图像可以约束在其容器中

---

剩余空间的分布发生在所有非柔性轨道之后 大小调整功能已达到最大值

---

其原因如下：

1fr

实际上被解释为定义了

minmax（auto，1fr）

。

minmax（）

函数接受两个参数，并指定如果第一个参数恰好解析为大于第二个参数（

auto

1fr

），则整个

minmax

表达式将替换为第一个参数

因此：

实际上是

minmax(auto, 1fr)

当

auto

大于

1fr

时，会变成

auto

有两种方法可以解决此问题：

• 或者，应用明确的

  min height

  resp<代码>最小宽度到网格项目
• 或者，这是我多年来一直在使用的，在您的网格定义中，每当网格元素超过分数网格轨道高度或宽度的风险时，而不是

  1fr

  使用

  minmax（0，1fr）

  （或者，不是

  0

  ，而是网格单元的适当值）

---

谢谢你的信息@a.mola。如果有人能详细说明这一点，那将很有用。否则，在我看来，这是另一个CSS不直观/随机/非感官/黑客的例子。。。编辑我的答案：DCool。我不明白为什么。希望将来当我了解网格单元如何拉伸到指定的点（使用

网格模板列/行

）后，它会变得很明显。无论如何，希望在我们的

img

网格项上放置

min-width:0

不会有太多不必要的副作用。这就像

div

的默认显示值是

block

而span是

inline

。。。如果你不介意的话，这只是你需要记住的规则之一。。。你能推翻这个答案吗：我们敢说图像的内在尺寸会拉伸细胞吗？到那时，就没有空闲空间了？如果是这样的话，是img的

minwidth/height:auto

属性和值负责拉伸单元格（到图像的固有尺寸大小）（如下所示）？“我们是说图像的固有尺寸拉伸单元格吗？”是的。“然后，就没有自由空间了？”正确。“如果是这样，是img的

min width/height:auto

属性和值负责拉伸单元格（到图像固有尺寸的大小）（如下所示）？“不是。这是因为

网格模板列

没有长度限制，因此单元格可以自由扩展。这就是为什么当您使用

网格模板列时布局工作正常：50%50%

，而不是

1fr 1fr

。为什么应用于网格项的

min width/height:0px

会使

1fr

真正使单元格跨越网格容器的相关维度（在本例中为

10vh

）？请注意，您的HTML没有

#grid-container2

。我想这是我最喜欢回答的问题之一，因此-您在深入解释问题的同时保持清晰，您提供了多种解决方案，并提供了您常用的解决方案。将使用您的配置文件查找类似的质量

auto