小程序轮播图图片自适应：不用JavaScript，如何让图片充满49%宽度容器且高度自适应？

在小程序中，如果你希望轮播图的图片能够自适应宽度为49%的容器，并且高度能够自适应，可以通过纯CSS的方式来实现。以下是一个简单的解决方案：

1. 使用 aspect-ratio 属性

aspect-ratio 属性可以设置元素的宽高比，从而实现高度自适应。

<swiper class="swiper-container">
  <swiper-item>
    <image src="your-image-url" class="swiper-image" />
  </swiper-item>
  <!-- 其他 swiper-item -->
</swiper>

.swiper-container {
  width: 100%;
}

.swiper-image {
  width: 49%;
  aspect-ratio: 1 / 1; /* 设置宽高比为1:1，你可以根据需要调整 */
  object-fit: cover; /* 保持图片比例并填充容器 */
}

2. 使用 padding 技巧

如果你需要兼容不支持 aspect-ratio 的浏览器或小程序环境，可以使用 padding 技巧来实现高度自适应。

<swiper class="swiper-container">
  <swiper-item>
    <div class="image-container">
      <image src="your-image-url" class="swiper-image" />
    </div>
  </swiper-item>
  <!-- 其他 swiper-item -->
</swiper>

.swiper-container {
  width: 100%;
}

.image-container {
  width: 49%;
  padding-top: 49%; /* 设置 padding-top 为宽度的百分比，实现高度自适应 */
  position: relative;
}

.swiper-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

3. 使用 flex 布局

如果你希望图片在容器中居中显示，可以使用 flex 布局。

<swiper class="swiper-container">
  <swiper-item>
    <div class="image-container">
      <image src="your-image-url" class="swiper-image" />
    </div>
  </swiper-item>
  <!-- 其他 swiper-item -->
</swiper>

.swiper-container {
  width: 100%;
}

.image-container {
  width: 49%;
  padding-top: 49%; /* 设置 padding-top 为宽度的百分比，实现高度自适应 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

总结

通过以上方法，你可以实现图片在小程序轮播图中自适应宽度为49%的容器，并且高度能够自适应。aspect-ratio 是最简单的方式，但如果需要兼容性更好的方案，可以使用 padding 技巧或 flex 布局。