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 負數 圖片的寬度的一半