做移动端web页面的时候，如何让全屏图片适应不同的分辨率并且不变形呢?

Question

想要有全屏滚动的banner，以及全屏图片，增加剪切效果。但是iphone456的尺寸都不一样，如何适配呢，android更是头疼拉伸图片会导致图片变形失真，有没有不用拉伸的办法呢

Answer 1

将图片做为背景，然后设置background-size；对于容器的宽、高可以考虑用rem单位，然后动态计算html标签的font-size值；
//-设置html标签font-size
(function(doc,win){
var_root=doc.documentElement,
resizeEvent='orientationchange'inwindow?'orientationchange':'resize',
resizeCallback=function(){
varclientWidth=_root.clientWidth,
fontSize=20;
if(!clientWidth)return;
if(clientWidth<640){
fontSize=20*(clientWidth/320);
}else{
fontSize=20*(640/320);
}
_root.style.fontSize=fontSize+'px';
};
if(!doc.addEventListener)return;
win.addEventListener(resizeEvent,resizeCallback,false);
doc.addEventListener('DOMContentLoaded',resizeCallback,false);
})(document,window);
                            

Answer 2

我一般都是这样做的
.container{
width:100%;
height:100%;
min-height:100%;
}
有的时候需要比较精确的计算，就用js计算出来高度，给赋值给height就行了