css:整张图片兼容不同手机H5

css:整张图片兼容不同手机H5

需求：直接把一张图片做一个html，然后上线可以访问。
我原本是想把图片分成，背景+中间内容，这样切图分开可以做兼容，然后我就这么搞了，背景图上面是蓝色天空，下面是白云，logo放在蓝色背景区域，有个小人开车图放在蓝色和白色交界的地方，最下面放我们的logo。

我按照原来的思路搞完之后，兼容出了很大的问题，机型太多，宽高都不大一样，我们想让iphonex是一整页，不容滑动，iphone4高度太低，我们想让它可以滑动，等等…

这就很麻烦了，每次换机型，那个小车图片一会上移，一会下移，反正就是很麻烦，我就想让ui，把背景拆成两部分，我给盒子一个背景蓝色，白云作为盒子的背景颜色，直接设置个background: url(“xxx.png”) no-repeat bottom center; 然后给白云图片一个高度，这样我才能定位小车图片。

我还在想的时候，我们的ui是个资深ui，他给我一通分析，最后调整图片，将需要显示的内容放在中间，然后两边就是背景图，让我直接把图片扔进去就行，以center为基准然后根据屏幕去裁剪多余部分。

然后我就搞定了，省了很多事…

        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        background: url("./tuk-h5.png") no-repeat center;
        background-size: cover;

cover：会去自适应图片，并将多余的裁剪
contain：会去按比例显示图片，周围可能出现空白的情况
百分比：会出现图片拉伸或压缩

借此记录下，不是新的知识，但是让我很快搞定了。