开发H5时背景照片兼容不一样手机屏幕处理的最佳实践

最近在从新作过去常作的翻页H5，关于背景图有些新的经验心得分享。

翻页H5的背景图一般是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例很是的不统一，这致使在背景图上的处理至关要注意。

一般我会以600*1000这个比例来选择或者设计（好记，PS输入方便，比例适中）背景图，譬如这样一张美女背影图：（让我看见大家的双手，不要往裤裆伸！）

1、四年前个人方案

3、四年的手机相对尚未那么多瘦长的譬如iPhone7尤为是iPhoneX的时候，个人解决方法是容忍适度的拉伸。

当时常见的手机屏幕比例：

• （320*480） 宽/高=0.66 iphone4
• （480*800） 宽/高=0.6 三星多款和一些安卓
• （750*1334）宽/高=0.56 iphone6

设置背景图的css是：

.img{
    background-image:url('slide.jpg');
    background-size:100% 100%;
  }

如此一来，宽/高=0.6比例的手机将完美显示，而更扁的手机如iphone4背景图会有横向拉伸，更瘦长如iphone6则是纵向拉伸。计算一下，拉伸率最高是11%左右，勉强能够接受。

能够看下效果，中间是实图比例，左边压扁，右边拉长：

（反正若是实际是这三款背景的姑娘我都要了！）

2、若是如今仍是用同样的方案

然而到了今天，忽然冒出来愈来愈多像iPhone X这样的瘦长款手机，若是按照原来的方案，要取中间值的比例来作背景图，将会是这样的效果：

最右边是iPhone X上的拉伸：

最右边这样的背影怕是一抱就会断的感受

这已是明显不能接受的畸形了。固然为了适应iPhoneX这样的手机，若是以旧方案来设计背景图，可能使用的标准图片的比例应该大约是600*1050的尺寸会更好些。

不过不管怎么说，这个区间的极值会让即使中间比例的照片都会带来不能容忍的拉伸比例。

3、裁切解决

因而考虑从裁切的方式来解决，css3里的background-size有一个cover属性，就是用来处理背景的裁切：把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。

设置背景图的css是：

.img{
    background-image:url('slide.jpg');
    background-size:cover
  }

生成图片会是这样的效果：

iPhone4比例的手机裁切的是靠下的部分，而iPhone6/iPhoneX比例的手机裁切的是靠右的部分。这带来一个新问题：很容易把照片的关键元素裁切掉，譬如已经在iPhoneX上看不到美女的右边胳膊。

4、裁切，并保持背景图显示中心位置

这时咱们能够利用background-position来实现图片的裁切从四周开始。

设置背景图的css是：

.img{
    background-image:url('slide.jpg');
    background-position:center;
    background-size:cover
  }

加了背景的定位，会让背景在裁切中保持居中的裁切效果：

那么咱们在构图时有什么考虑呢？

5、选择（设计）图片时构图

我又作了个页面把构图作成示意图：

整张图片是设计图，蓝色部分是会被裁切掉上下部分显示在iPhone4比例的手机上，而红色部分是会被裁切掉左右显示在iPhoneX比例的手机上：

看完这个图，你应该能知道在设计或选择图片时，只要将必须显示的元素放在红蓝重叠的地方（人物中的胸啊，脸啊，臀啊），就能保证在任意手机上，照片上的关键元素都不能丢失。

全部效果都作成了html放在了个人github项目上：

https://github.com/1897890924...

同发个人我的博客 https://sxg.kuashou.com