css图片适配手机屏幕

CSS图片适配手机屏幕是网站设计的重要环节，这样可以让网站不仅在桌面上适配良好，也能在移动端设备上正常显示。对于图片的适配，可以采用以下几种方法：

img {
max-width: 100%;
height: auto;
}

这一段代码可以让图片在网页上自适应屏幕大小，并保持高宽比例。max-width: 100%可以使图片最大显示为屏幕大小，而height: auto则可以保持高宽比例不变。这样图片就可以在不同大小的屏幕上正常显示，而不会变形或失真。

@media screen and (max-width: 600px) {
img {
max-width: 100%;
height: auto;
}
}

通过@media查询可以在不同屏幕尺寸下应用不同的样式，这样可以更好地适配移动端设备。上述代码表示如果屏幕宽度小于等于600px，图片将采用和前文相同的样式，即自适应宽度并保持高宽比例。

background-image: url("image.jpg");
background-size: 100% auto;

对于背景图片，可以采用background-size属性适配，将图片按比例缩放以适配屏幕大小。代码中的background-size: 100% auto表示图片宽度为100%屏幕大小，高度根据比例自适应。

以上就是几种方法进行CSS图片适配手机屏幕的方式，需要针对实际情况灵活运用。合理的图片适配可以提升网站用户体验并增加用户留存率。