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

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《小程序 CSS 样式：如何让固定高度容器中的图片宽度 100% 自适应？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

以小程序 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% 自适应？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！