基于Avada主题的WordPress画廊缩略图尺寸调整与垂直居中CSS实现

我帮你梳理下搞定这个需求的具体方案，Avada主题的画廊样式调整基本靠自定义CSS就能实现，不用折腾复杂的主题设置或者插件。

核心思路 #

我们要针对.fusion-gallery-image容器和内部的图片标签做两个关键调整：

• 给容器设置布局规则，让图片能在容器内垂直居中
• 用CSS的transform: scale()属性放大缩略图，这种方式不会破坏原有布局结构

具体代码实现 #

第一步：设置容器的居中布局

先给外层容器添加flex布局，确保图片在容器内垂直水平都居中，同时隐藏溢出的部分（防止缩放后图片超出容器范围）：

.fusion-gallery-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

第二步：设置缩略图的放大比例

根据你需要的200%或300%放大效果，选择对应的代码：

• 放大至200%：

.fusion-gallery-image img {
  transform: scale(2);
  /* 可选：添加过渡动画，让缩放效果更平滑自然 */
  transition: transform 0.3s ease;
}

• 放大至300%：

.fusion-gallery-image img {
  transform: scale(3);
  transition: transform 0.3s ease;
}

可选：鼠标悬停时才触发放大

如果不想让缩略图一直保持放大状态，只想在鼠标悬停时显示放大效果，可以用:hover伪类实现：

.fusion-gallery-image img {
  transition: transform 0.3s ease;
}
.fusion-gallery-image:hover img {
  transform: scale(2); /* 换成scale(3)就是300%放大 */
}

代码添加方式 #

打开Avada主题后台，进入Theme Options → Custom CSS，把上面的代码粘贴进去，保存设置后就能看到效果了。这种方式不会修改主题核心文件，不用担心主题更新后样式丢失。

内容的提问来源于stack exchange，提问作者chris