CSS的图片拉伸和平铺是Web设计中非常重要的一项技术。

首先，我们来说说什么是拉伸和平铺。拉伸是指将一张图片通过CSS的属性指定为“100%宽度”或“100%高度”，使其自动适应浏览器窗口大小的技术；而平铺是指将一张图片通过CSS的属性指定为“repeat”或“repeat-x”或“repeat-y”，使其在页面上重复出现的技术。

img.stretched {
width: 100%;
height: auto;
}
img.tiled {
background-repeat: repeat;
}

代码中，我们可以看到当对图片使用“stretched”类时，其“width”属性被设置为“100%”，即将图片宽度设置为浏览器窗口的大小，并且将“height”属性设置为“auto”，即自动计算图片高度的大小。而当对图片使用“tiled”类时，其“background-repeat”属性被设置为“repeat”，即在水平和垂直方向上不断重复显示背景图片。

如果我们希望只在水平方向上平铺显示背景图片，可以将“background-repeat”属性设置为“repeat-x”，而如果希望只在垂直方向上平铺显示背景图片，可以将“background-repeat”属性设置为“repeat-y”。

总结一下，图片拉伸和平铺技术是Web设计中不可或缺的一项技术，通过CSS的样式属性，我们可以轻松实现对图片的适应性拉伸和平铺，从而让页面的设计更加完美。