0

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

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

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;
}

谢谢你的帮助！

4

1 回答 1

0

因此，显然将每个图像都放在一个容器中，“修复”了 Safari 的行为。

可以在此处找到有关该行为的更多信息： https ://stackoverflow.com/a/44773109/7243348

于 2021-03-29T12:57:37.440 回答