CSS背景-图片在移动浏览器上被扭曲和放大

是一个常见的问题，主要是由于移动设备的屏幕尺寸和像素密度不同于桌面设备，导致图片在移动浏览器上显示时出现了变形和放大的情况。

为了解决这个问题，可以采取以下几种方法：

使用响应式图片：通过使用不同尺寸和分辨率的图片，可以根据设备的屏幕大小和像素密度来选择合适的图片进行显示。可以使用CSS的@media查询和srcset属性来实现响应式图片。
使用CSS属性background-size：通过设置background-size属性为cover或contain，可以控制背景图片的尺寸适应容器的大小。cover会保持图片的纵横比并填充整个容器，可能会裁剪部分图片；contain会保持图片的纵横比并完整显示在容器内，可能会有留白。
使用CSS属性background-position：通过设置background-position属性来调整背景图片在容器中的位置，可以避免图片被放大或扭曲。可以使用百分比或像素值来指定位置。
使用媒体查询：通过使用CSS的媒体查询，可以根据设备的屏幕大小和像素密度来针对性地调整背景图片的样式。可以根据不同的设备尺寸设置不同的background-size和background-position属性。