使用 CSS Grid 时图像高度在 Safari 上无法正常工作

【问题标题】：Image height not working well on Safari while using CSS Grid使用 CSS Grid 时图像高度在 Safari 上无法正常工作
【发布时间】：2021-02-18 20:42:46
【问题描述】：

您好，我在尝试将图像“装入”css 网格容器中时遇到了一些麻烦（该问题仅在使用 Safari、Firefox 和 Chrome 时发生。）问题是，使用 Safari 时的 img 高度占用了所有可用空间，这会使图像看起来变形（下面是我截取的屏幕截图的链接）

这些是我应用于图像的属性：

img {
   flex-basis: calc(66.67% - 3.6rem);
   width: 66.67%;
   margin: 0 auto;
}

【问题讨论】：

【解决方案1】：

您可以尝试重新定义图像的高度，因为我遇到了同样的问题，并且通过重新定义，它在 safari 上对我有用。并且不要以百分比给出宽度和高度，而是以像素给出它，这样会更方便。

【讨论】：

谢谢，这对我有帮助，我刚刚为图像指定了最大宽度和最大高度。该图像具有正方形的形状，因此通过将 47.2rem 应用于两个属性来修复它。我认为这是苹果应该解决的问题。