css3 - h5单页滚动的图尺寸问题

问题描述

做全屏滚动的五六个图的页面，一个图一个页面，但是视觉给的图都是一个大小，有的图在不同的尺寸显示不一致，比如有个转盘是扁的。有什么办法呢？

问题解答

首先说视觉上变形是因为什么，因为你没有等比例缩放，视觉上肯定会不和谐。要确认下，h5页面是不是要铺满，还是直接用设计图宽度100%，上下居中就行，不管上下留白。再说，这种h5页面，比如转盘要单拿出来，固定相对的一个位置，如 top:50%; margin-top:*px。这样在各个高度就不会变形。

用的@media设置不同分辨率的，有些有的字体啥的不区分可能没啥事，大圆圈区分一下大小吧

图片背景处理方法background-size:cover;background-position:center center;

img图片position:absolutel;top:50%;left:50%;margin:负数 图片的高度的一半 0 0 负数 图片的宽度的一半