Html 在WP Gallery功能(Safari和Chrome问题)中,图库块断裂并融化在一起

Html 在WP Gallery功能(Safari和Chrome问题)中,图库块断裂并融化在一起,html,css,wordpress,image,block,Html,Css,Wordpress,Image,Block,我正在帮助清理和翻新一个朋友组织/艺术场所的网站 我们正在制作过去几年的商业图片库。从Firefox浏览器上看,一切看起来都不错。从任何Safari版本或Chrome浏览器来看,所有图像似乎都以不同的方式聚集在一起并覆盖在一起 请参阅其中一个厨房的链接-> 我搜索了很多论坛和帖子,但似乎找不到答案。我是一个代码初学者,但如果你能更透彻地描述什么代码,在哪里添加,等等,我就能处理它 提前谢谢你!//Erik您没有为li提供固定高度,如果您不提供,则无法正确使用对象适合度:封面这里是css,还添加了

我正在帮助清理和翻新一个朋友组织/艺术场所的网站

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

请参阅其中一个厨房的链接->

我搜索了很多论坛和帖子,但似乎找不到答案。我是一个代码初学者,但如果你能更透彻地描述什么代码,在哪里添加,等等,我就能处理它


提前谢谢你!//Erik

您没有为
li
提供固定高度,如果您不提供,则无法正确使用
对象适合度:封面
这里是
css
,还添加了一个
边距底部
,以证明

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

谢谢,我添加了文件和图片,它看起来再次正确。解决了我问题的第一部分。第二部分是关于手机。有没有标准的CSS来增加网站对手机和标签的响应?我注意到手机上的网站在试图阅读图库或包含专栏的网站部分时犯了很多错误。感谢所有我能得到的帮助!