移动端的背景图片怎么兼容？

添加背景图片的时候使用background-size: 100% 100%;会造成图片的变形，

background-size: cover;又会截掉部分图片。

你的图片应该不是正方形。想要平铺又不想超出，那么就设置这个图片长方形的一边为 100%。图片会自动撑满，而且图片保持原本的等比例

写js兼容或者css媒体查询吧

img {height: auto; width: auto\9; width:100%;}

你可以看下 css3 中  object-fit 这个属性，

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

大家说的方法都有试过，感觉在iPhoneX下图片都会有留白

使用js兼容或者媒体查询需要使用两个不同的图片，这样的代码比较繁琐，想知道大家都是怎么解决的

或者是大家都是使用js兼容或者媒体查询，只是我的思路不对

不想变形又要不被裁剪而且还不能留白，而你设置的又是背景图片，那么最好你的容器宽高比例和背景图片宽高比例一致，或者用img标签会好点。