H5如何让img图片自适应？

基本的CSS样式：

<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script src="layui/layui.js"></script>
<style>
.banner {
	display: block;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.layui-carousel{
	margin-top: 1.875rem;
	height: 29.3125rem;
}
			
/*屏幕大于1680px（超大屏电脑）*/
	@media screen and (min-width: 105rem){
	.layui-carousel{
		height: 45.875rem;
	}
}
				
/*屏幕在1200px到1679之间 (大屏幕电脑) */
	@media screen and (min-width: 75rem) and (max-width: 104.9375rem){
	.layui-carousel{
		height: 29.3125rem;
	}
}
				
/*屏幕在1024px到1199之间(中屏幕电脑) */
	@media screen and ( min-width: 64rem) and (max-width: 74.9375rem){
	.layui-carousel{
		height: 26.875rem;
	}
}	
							
/*屏幕在768px到1023之间(小屏幕-pad)*/
	@media screen and ( min-width: 48rem) and ( max-width: 63.9375rem){
	.layui-carousel{
		height: 22rem;
	}
}
				
/*屏幕在480px到768之间(主要是手机屏幕)*/
	@media screen and ( max-width: 48rem){
	.layui-carousel{
		height: 14.625rem;
	}
}
</style>

html代码：

<!--开始设计轮播图-->
<div class="layui-carousel" id="test1">
	<div carousel-item>
		<div><img src="img/index_banner1.png" class="banner" /> </div>
		<div><img src="img/index_banner2.png" class="banner" /> </div>
		<div><img src="img/index_banner3.png" class="banner" /> </div>
	</div>
</div>
<!--结束设计轮播图-->

加载轮番图的js代码：

<script>
layui.use('carousel', function() {
	var carousel = layui.carousel;
	//建造实例
	carousel.render({
		elem: '#test1',
		width: '100%', //设置容器宽度
		arrow: 'always', //始终显示箭头
		indicator: 'none' //指示器位置
	});
});
</script>

以上案例只是个简单的展示，若要进一步研究，请参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries