图库块在 WP Gallery 功能中破碎并融合在一起（Safari 和 Chrome 问题）

Question

我正在帮助朋友 organisation/art 的地方清理和翻新网站。

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

查看 link 到其中一个画廊-> 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;
  }
}

图库块在 WP Gallery 功能中破碎并融合在一起（Safari 和 Chrome 问题）

Gallery blocks break and melt together in WP Gallery function (Safari and Chrome issue)

html

css

wordpress

image

block