CSS是网页设计中一个非常重要的部分，它可以通过控制网页的样式来实现优美的布局效果。其中，图片的平铺与不变形是我们常见的需求之一。

在CSS中，我们可以使用background-image属性来设置背景图片。而使用background-repeat属性可以决定背景图片的平铺方式。默认情况下，背景图片会自动重复填满整个容器。但有时候，我们不希望图片平铺，或者只想水平/竖直方向平铺。这时候就需要用到background-repeat属性：

.container {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat; /* 不重复 */
/* 或者 */
background-repeat: repeat-x; /* 水平重复 */
background-repeat: repeat-y; /* 竖直重复 */
}

但是，有时候我们想要的效果并不是简单地平铺图片，而是让图片在保持比例的同时填满整个容器，同时不出现变形。这时候，可以使用background-size属性：

.container {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat;
background-size: cover; /* 自适应拉伸 */
/* 或者 */
background-size: contain; /* 保持原比例 */
}

使用cover后，背景图片会自适应拉伸至容器大小，但是可能会被裁剪，无法完全显示。而使用contain则会保持原图片比例，并适应容器大小，但是可能会存在留白区域。

综上所述，通过合理使用background-repeat和background-size属性，我们可以轻松实现图片的平铺与不变形，从而达到优美的布局效果。