Swiper JS autoHeight属性首屏幻灯片高度适配异常问题

开启autoHeight配置的Swiper会在初始化阶段读取当前激活幻灯片的内容高度，作为容器初始高度。首屏渲染为正方形的核心原因：

• 你使用的Next.js Image组件设置了layout="fill"，该模式下图片会绝对定位脱离普通文档流，无法撑开父容器高度
• Swiper初始化时机早于首屏图片加载完成，此时外层.custom-img-container没有设置明确高度，Swiper读取到的默认容器高度为1:1正方形比例
• 幻灯片切换时所有图片已经加载完成，因此后续高度自适应逻辑可以正常运行

方案1：给图片容器设置固定宽高比（推荐） #

这是Next.js layout="fill"模式的强制使用要求：使用该模式的Image父元素必须设置position: relative和明确尺寸。你可以根据业务图片的实际宽高比，给容器设置aspect-ratio属性，Swiper初始化时就能直接拿到正确高度，无需等待图片加载。
对应样式代码：

.custom-img-container {
  position: relative;
  width: 100%;
  /* 替换为业务图片的实际宽高比，如16:9、4:3、3:2等 */
  aspect-ratio: 4/3;
}
.custom-img {
  width: 100%;
  height: 100%;
}

如果你的业务图片宽高比不固定，使用方案2即可。

方案2：首图加载完成后手动触发Swiper高度更新 #

获取Swiper实例，在首屏图片加载完成后，手动调用Swiper内置的updateAutoHeight方法重新计算容器高度，修改后的组件代码如下：

import { Swiper, SwiperSlide } from 'swiper/react';
import { useRef } from 'react';
import Image from 'next/image';
// 注意引入Swiper基础样式
import 'swiper/css';

export default function ImageSwiper({ images }) {
  const swiperInsRef = useRef(null);

  const handleFirstImageLoad = () => {
    setTimeout(() => {
      if (swiperInsRef.current?.swiper) {
        // loop模式下初始激活幻灯片索引为0，传入索引更新对应高度
        swiperInsRef.current.swiper.updateAutoHeight(0);
      }
    }, 0);
  };

  return (
    <article className='card mb-8 block'>
      <div className='w-full'>
        <Swiper
          ref={swiperInsRef}
          autoHeight
          loop
          spaceBetween={0}
          slidesPerView={1}
        >
          {images.map((image, i) => (
            <SwiperSlide key={i}>
              <div 
                className='custom-img-container'
                // layout="fill"必须给父元素加相对定位
                style={{ position: 'relative', width: '100%' }}
              >
                <Image
                  className='custom-img'
                  layout='fill'
                  src={image}
                  objectFit='cover'
                  onLoad={i === 0 ? handleFirstImageLoad : undefined}
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </article>
  );
}

注意：即使使用方案2，也必须给.custom-img-container添加position: relative，否则layout="fill"的图片会相对于上层其他定位元素渲染，出现显示错位。

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