如何用SCSS/JS实现Splide滑块图片文本底部对齐布局？

我用Splide.js制作了一个包含图片与文本的滑块，滑块列表（ul.splide__list）的尺寸由最大的列表项（li.splide__slide）决定。每个滑块项包含item-wrapper容器，内部图片和文本的尺寸均不固定。现需实现：所有滑块项的文本在容器底部对齐且起始高度一致，图片位于文本上方并保持指定间距。能否通过SCSS实现该布局？必要时也可使用JS进行调整。

布局效果示意图：

现有代码片段 #

HTML

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list"> <!-- Slider List -->
       <li class="splide__slide"> <!-- Slider Item -->
        <div class="item-wrapper"> 
         <div class="image">
           <img/>
         </div>
        <div class="text">
         <h2>Some text</h2>
          Some other text
        </div>
       </div>
      </li>
    </ul>
  </div>
</div>

SCSS

.splide {
  width:100%;
  height: 100%;
}
.splide__list {
  display: flex;
  .splide__slide{
    .item-wrapper{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      width: 100%;
      .image {
        img {
          width: 100%
          height: auto
        }
      }
      .text {
      }
    }
  }
}

完全可以通过SCSS结合Flexbox实现目标布局，无需JS就能满足需求。核心是利用Flex属性让图片容器自适应填充剩余空间，同时固定文本区域在底部。

核心实现思路 #

1. 让所有splide__slide继承滑块列表的高度，确保所有滑块项高度统一（因为列表高度由最大项决定）。
2. 给item-wrapper设置垂直方向的Flex布局，通过flex-grow让图片容器自动填充文本区域之外的空间，同时用gap或margin-bottom控制图片与文本的间距。
3. 文本区域自然固定在底部，实现所有滑块的文本底部对齐，且因滑块高度统一，文本区域的起始高度也会保持一致。

优化后的SCSS代码 #

.splide {
  width: 100%;
  height: 100%;
}

.splide__list {
  display: flex;
  // 强制滑块项拉伸填充列表高度
  .splide__slide {
    height: 100%;
    display: flex;
    align-items: stretch;

    .item-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      gap: 1.5rem; // 图片与文本的指定间距，可根据需求调整

      .image {
        // 让图片容器填充剩余空间，保证文本区域固定在底部
        flex-grow: 1;
        display: flex;
        align-items: center; // 可选：让图片在容器内垂直居中
        justify-content: center; // 可选：让图片在容器内水平居中

        img {
          width: 100%;
          height: auto;
          max-height: 100%; // 防止图片超出容器高度
        }
      }

      .text {
        // 可选：如果文本长度差异极大，可设置min-height强制统一起始高度
        // min-height: 90px;
      }
    }
  }
}

可选JS辅助方案（极端兼容场景） #

如果遇到老旧浏览器兼容问题，或需要动态适配文本高度，可通过JS计算所有文本区域的最大高度并统一设置：

document.addEventListener('DOMContentLoaded', () => {
  const textBlocks = document.querySelectorAll('.splide__slide .text');
  let maxTextHeight = 0;

  // 遍历获取最大文本高度
  textBlocks.forEach(block => {
    maxTextHeight = Math.max(maxTextHeight, block.offsetHeight);
  });

  // 给所有文本块设置统一最小高度
  textBlocks.forEach(block => {
    block.style.minHeight = `${maxTextHeight}px`;
  });
});

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