小程序轮播图自适应难题：如何用纯CSS实现图片宽度100%且高度自适应？

在小程序中实现轮播图的自适应效果，尤其是希望图片宽度占满容器宽度且高度自适应，可以通过纯CSS来实现。以下是具体的解决方案：

1. 使用 aspect-ratio 属性

aspect-ratio 是CSS的一个新属性，它可以设置元素的宽高比。通过设置 aspect-ratio，可以让图片的高度根据宽度自动调整。

.swiper-item {
  width: 100%;
  aspect-ratio: 16 / 9; /* 根据你的图片宽高比设置 */
}

.swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

2. 使用 padding-top 技巧

如果你需要兼容不支持 aspect-ratio 的浏览器，可以使用 padding-top 技巧来实现类似的效果。

.swiper-item {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 的宽高比，计算方式为 (9 / 16) * 100% */
}

.swiper-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

3. 使用 vw 单位

vw 单位是相对于视口宽度的单位，可以用来设置图片的宽度和高度。

.swiper-item {
  width: 100vw;
  height: 56.25vw; /* 16:9 的宽高比，计算方式为 (9 / 16) * 100vw */
}

.swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

4. 使用 flexbox 布局

如果你希望图片在容器中居中显示，并且高度自适应，可以使用 flexbox 布局。

.swiper-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.swiper-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例，不裁剪 */
}

5. 使用 grid 布局

grid 布局也可以用来实现类似的效果。

.swiper-container {
  display: grid;
  place-items: center;
  width: 100%;
}

.swiper-item {
  width: 100%;
  display: grid;
  place-items: center;
}

.swiper-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例，不裁剪 */
}

总结

以上几种方法都可以实现图片宽度100%且高度自适应的效果。你可以根据项目的需求和兼容性要求选择合适的方法。aspect-ratio 是最简单和现代的方式，但如果需要兼容旧版浏览器，padding-top 技巧是一个可靠的替代方案。