在前端设计中，我们常常需要使用拉伸图片的效果，这个效果可以让图片在不改变其原始比例和质量的情况下扩展或收缩。

CSS中，我们可以通过设置background-size属性来实现拉伸图片的效果。下面是一个例子：

background-size: 100% 100%;

在这个例子中，我们将background-size设置为100% 100%，这意味着图片的宽度和高度将被拉伸以适应其父容器的大小。如果你只想拉伸图片的宽度，可以将属性设置为：

background-size: 100% auto;

如果你只想拉伸图片的高度，可以将属性设置为：

background-size: auto 100%;

除了使用background-size属性，我们也可以使用CSS的缩放属性transform:scale()来实现图片的拉伸效果。具体用法如下：

transform:scale(2,2);-ms-transform:scale(2,2); /* IE 9 */-webkit-transform:scale(2,2); /* Safari 和 Chrome */

在这个例子中，我们将图片的宽度和高度增加了两倍。

最后，需要注意的是拉伸图片的效果有可能失真，特别是在图片尺寸与背景容器尺寸差异较大时。因此，在使用这个效果时，我们需要谨慎选择图片的尺寸，以确保图片质量没有受到影响。