CSS图片自适应是指通过CSS技术使图片能够根据不同的屏幕尺寸和设备自动适应大小，并保持良好显示效果。这在开发响应式网站和移动应用中非常重要，因为不同设备屏幕尺寸的差异很大，如果不进行适配处理，图片可能会无法完整显示、变形等问题。

为了实现CSS图片自适应，我们可以使用以下几种方法：

1. 使用百分比的宽度和高度：

在普通的img标签中，可以通过设置宽度和高度的百分比来实现图片自适应。例如，将图片的宽度设置为*，可以使图片的宽度随着父元素的宽度而自适应。同时，可以将高度设置为“auto”，使图片的高度按比例自动调整。

```css

img {

width: *;

height: auto;

}

```

这样做的好处是图片可以根据父元素的宽度来自动调整大小，适应不同的屏幕尺寸。但是有时会出现图片拉伸的问题，所以*保持图片的原始宽高比例。

2. 使用max-width属性：

为了避免图片被拉伸，可以使用max-width属性来限制图片的*宽度，并将高度设置为“auto”。这样，当图片的宽度超过了父元素的宽度时，图片会按比例缩小，但不会变形。

```css

img {

max-width: *;

height: auto;

}

```

这种方法适用于图片比较大且希望在较小的屏幕上显示完整的情况。

3. 使用background-image属性：

如果图片是作为CSS背景图使用的，可以使用background-image属性来实现自适应。通过将background-size属性设置为“cover”，可以将背景图片等比例缩放以完全覆盖背景区域。在移动设备上，可以使用媒体查询来调整背景图大小。

```css

.container {

background-image: url(example.jpg);

background-size: cover;

}

```

4. 使用媒体查询：

对于不同的屏幕尺寸和设备，可以使用媒体查询来应用不同的CSS样式。通过设置不同的宽度和高度，可以适应不同的屏幕尺寸。

```css

@media screen and (max-width: 480px) {

img {

width: *;

height: auto;

}

}

@media screen and (min-width: 481px) and (max-width: 1024px) {

img {

max-width: *;

height: auto;

}

}

```

这样，可以根据设备的屏幕宽度来应用不同的CSS样式，实现图片的自适应。

总结一下，CSS图片自适应是通过设置宽度、高度、*宽度等属性来实现的。通过使用百分比的宽高、max-width属性、background-image属性和媒体查询，可以根据不同的设备、屏幕尺寸自动调整图片的大小，以达到*的显示效果。在开发响应式网站和移动应用时，合理运用这些方法，可以提升用户体验，确保图片的完整显示和不变形。