Css 为什么图像在旧设备的网格内显示不正确（据推测，旧设备具有完全的网格支持）？

首先，一些简化的代码和预期的属性。这：

网格中的破损图像
.App{
显示器：flex；
证明内容：中心；
}
.电网{
高度：300px；
宽度：300px；
显示：网格；
证明项目：中心；
对齐项目：居中；
背景颜色：蓝色；
网格模板柱：0.25fr重复（3，1fr）0.25fr；
网格模板行：0.25fr重复（3，1fr）0.25fr；
}
.圆圈{
显示：块；
身高：90%；
宽度：自动；
溢出：隐藏；
网格行：3；
网格柱：3；
}
>P>正如ChrisHaas指出的，这似乎是由于Safari，至少是在旧设备上，对高度规格的不同解释不考虑足够的高度来作为父引用。因此，相对于网格，百分比高度是毫无意义的，而图像的缩放基于网格容器（或接近网格容器的内容。请参见上面我的原始问题中的比较）

这并不能解释我问题中的所有内容，特别是为什么
div
可以正确缩放，而
img
不能，但由于上面提到的答案中的链接，它确实导致了使用嵌套FlexBox的工作解决方案。有很多标记是这样做的，我认为代码不那么直观，但它确实可以在问题中提到的旧设备上工作，这就是问题所在

注意：对于任何试图使用此解决方案的人，我不确定使用下面的
高度
/
宽度
百分比是否是最佳解决方案。我尝试了
flex grow
对单元格进行
1
处理，对边框进行
0.25
处理，这构造了正确的空“网格”，但该解决方案也允许图像对中心框进行增长，而不是受其约束，因此我不得不将其扔掉。比我更了解flexbox的人可能会指出一种方法来让这个角度起作用

无论如何，这是工作代码：



网格中的工作图像
.App{
显示器：flex；
证明内容：中心；
}
.电网{
高度：300px；
宽度：300px；
显示器：flex；
弯曲方向：立柱；
背景颜色：蓝色；
}
.网格行{
宽度：100%；
身高：100%；
显示器：flex；
}
.上下{
身高：25%；
}
.细胞{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.左-右{
宽度：25%；
}
.圆圈{
宽度：90%；
}
我认为这与此有关：@ChrisHaas这个答案非常有用，听起来确实像是“为什么”。Safari对高度规格的解释在仍受支持的设备中并不一致，这有点令人惊讶，但我愿意接受这一点。也就是说，答案（改用flexbox）并不适用于我，因为我的应用程序实际上需要一个2d网格。你可以在任何地方寻求帮助吗？事实上，我认为嵌套FlexBox（per）可能是解决方案。感觉代码将明显不那么干净，但如果它能工作。。。我会试着回去报告