Drupal Views Slideshow在CSS Grid布局下加载后图片变为0x0故障排查

根因确认 #

你的排查方向正确，问题核心是Views Slideshow的内置JS会在DOM加载完成阶段读取轮播容器的可见宽高，用来适配图片尺寸。当轮播放在弹性CSS Grid子项中时，Grid布局的撑开时机晚于Slideshow的尺寸计算逻辑，导致JS读取到的容器宽高为0，最终将所有<img>元素的尺寸强制设为0x0。同一页面Grid外的轮播不受影响也符合该问题的特征。

修复步骤 #

• 先给承载轮播的Grid子项添加固定最小宽高，避免布局收缩导致尺寸读取异常，在主题自定义CSS中添加对应样式：

/* 将选择器替换为你站点内对应Grid子项的实际类名/ID */
.grid-slideshow-wrapper {
  min-width: 100%;
  min-height: 420px; /* 替换为你站点幻灯片的实际展示高度 */
  overflow: hidden;
}

• 若CSS调整后问题仍存在，覆盖Views Slideshow的默认尺寸计算逻辑，在主题自定义JS中添加以下代码，设置JS加载优先级高于Views Slideshow模块的JS：

(function ($) {
  Drupal.behaviors.fixSlideshowGridConflict = {
    attach: function (context) {
      $('.views-slideshow-cycle-main-frame', context).once('fix-grid-size').each(function () {
        const $wrap = $(this).parent();
        const targetW = $wrap.width();
        const targetH = $wrap.height();
        // 强制给所有轮播图片设置正确尺寸
        $(this).find('img').css({
          width: targetW,
          height: targetH
        });
        // 覆盖轮播配置，避免后续窗口缩放时再次触发异常
        if (Drupal.settings.viewsSlideshowCycle) {
          Object.keys(Drupal.settings.viewsSlideshowCycle).forEach(id => {
            Drupal.settings.viewsSlideshowCycle[id].width = targetW;
            Drupal.settings.viewsSlideshowCycle[id].height = targetH;
          });
        }
      });
    }
  };
})(jQuery);

• 如果你使用的是Cycle2作为轮播底层库，可直接在Views幻灯片的高级设置中，给轮播外层容器添加data-cycle-auto-height="container"属性，强制轮播库直接继承容器高度，跳过动态尺寸计算逻辑。

验证方法 #

如需定位具体修改尺寸的JS代码，可在浏览器开发者工具中，给异常的<img>元素添加「属性修改断点」，触发尺寸修改时会直接定位到对应的JS代码段，无需逐一翻找模块源码。

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