做移动端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

Answer 2

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