html - 图库 block 在 WP Gallery 功能中 splinter 并融合在一起(Safari 和 Chrome 问题)

Question

我正在帮助 friend 组织/艺术场所清理和翻新网站。

我们正在制作过去几年业务的图片库。从 Firefox 浏览器上看，一切看起来都不错。从任何 Safari 版本或 Chrome 查看它，所有图像似乎都聚集在一起并以不同的方式叠加。

查看其中一个画廊的链接-> http://www.stallbergsgruva.se/2018-2/

我为此搜索了很多论坛和话题，但似乎找不到答案。我是代码的初学者，但如果您添加更详尽的代码描述以及添加代码的位置等，我可以处理它。

提前致谢!//埃里克

Answer 1

您没有为 li 提供固定高度，否则您将无法正确使用 object-fit: cover;这里是css，还加了一个margin-bottom来证明

@media (min-width: 600px) {
  .wp-block-gallery.columns-3 
  .blocks-gallery-image, 
  .wp-block-gallery.columns-3 
  .blocks-gallery-item {
    width: calc((100% - 32px)/3);
    margin-right: 16px;
    margin-bottom: 23px;
    height: 290px;
  }
}