为什么我的网格项在 chrome 和 firefox 中不在 safari 中时会在 safari 中拉伸

Question

我为这个网站建立了一个基于网格的照片布局： https://lsiemoneit.de/digital-identity/photos.html

它在 Firefox 和 Chrome 中的工作方式与我预期的一样，但布局在 Safari 中中断。我附上了一个代码笔，可以在下面复制和隔离该行为。不知何故，在 Safari 中，网格行被拉伸到 100%，而在 Chrome 和 Safari 中，它保持纵横比。这与 Safari 处理 object-fit: contain 的方式有关吗？

https://codepen.io/lkssmnt-the-lessful/pen/oNBLZyZ

.photos-container {
  width: 100%;
  display: grid;
  grid-column-gap: 0.5rem;
  grid-row-gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}

.photos-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

感谢您的帮助！

Answer 1

很明显，将每张图片都放在一个容器中，“修复”了 Safari 的这种行为。

可在此处找到有关该行为的更多信息：

为什么我的网格项在 chrome 和 firefox 中不在 safari 中时会在 safari 中拉伸

Why does my grid item stretch in safari when it does not in chrome and firefox

css

safari

css-grid

object-fit