使用Swiper JS制作纯图片轮播遇图片变形、行错位问题如何解决？

针对你遇到的轮播行错位问题，给你几个实用的解决办法：

1. 强制统一图片容器高度（最稳妥的方案） #

给每个轮播项（slide）设置固定比例的容器，让图片强制铺满容器，从根源上统一高度：

/* 给slide里的图片容器设置宽高比，这里以4:3为例 */
.swiper-slide .img-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3的比例，高度=宽度*0.75，可根据需求调整 */
  overflow: hidden;
}

/* 让图片铺满容器，保持比例裁剪 */
.swiper-slide .img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪超出部分，也可以用contain（显示完整图片，可能留空白） */
}

对应的HTML结构：

<div class="swiper-slide">
  <div class="img-container">
    <img src="你的图片地址" alt="描述">
  </div>
</div>

2. 让Swiper自动适配高度（适合高度差异较大的场景） #

开启Swiper的autoHeight属性，让轮播容器高度自动适配当前活跃slide的高度，同时配合图片的自适应设置：

const swiper = new Swiper('.swiper', {
  autoHeight: true, // 开启自动高度适配
  // 其他配置...
});

同时给图片加基础样式：

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片默认的行内间距 */
}

3. 解决图片加载延迟导致的计算错误 #

如果是图片加载慢，导致Swiper初始化时高度计算有误，可以开启Swiper的DOM监听属性，或者在图片加载完成后重新初始化：

const swiper = new Swiper('.swiper', {
  observer: true, // 监听swiper容器的变化
  observeParents: true, // 监听swiper父元素的变化
  // 其他配置...
});

或者手动监听图片加载：

// 获取所有轮播图片
const slidesImages = document.querySelectorAll('.swiper-slide img');
let loadedCount = 0;

slidesImages.forEach(img => {
  if (img.complete) {
    loadedCount++;
  } else {
    img.addEventListener('load', () => {
      loadedCount++;
      if (loadedCount === slidesImages.length) {
        swiper.update(); // 所有图片加载完成后更新Swiper
      }
    });
  }
});

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