小程序 CSS 样式：如何让固定高度容器中的图片宽度 100% 自适应？

以小程序 css 样式轻松实现自适应轮播图

各位开发者，大家好！在小程序开发中，有时我们需要处理复杂又具有一定动态性的样式布局。比如本文的问题：采用固定宽度且高度为 200px 的容器承载轮播图，如何让其中的图片宽度 100% 适配容器宽度，同时高度自适应？

不可使用 mode="widthfix" 的解决方法

由于无法使用小程序提供的 mode="widthfix" 属性（因其他 bug 限制），开发者提出了排除 js 解决方案的诉求。对此，我们可以借助 css 中的背景图特性来实现自适应效果：

.container {
  width: 49%;
  height: 200px;
  background: url(image.jpg) center no-repeat;
  background-size: 100% auto;
}

其中：

• background-size: 100% auto;：设置背景图宽度为 100% 适配容器宽度，高度自适应。

以上就是小程序 CSS 样式：如何让固定高度容器中的图片宽度 100% 自适应？的详细内容，更多请关注硕下网其它相关文章！