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

Question

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

Answer 1

First of all, let’s talk about the reason for the visual deformation. Because you don’t scale proportionally, it will definitely be visually disharmonious.
To confirm, whether the h5 page should be filled with space, or whether it is better to use the design width of 100%, just center the top and bottom, regardless of the white space at the top and bottom.
Besides, for this kind of h5 page, for example, the carousel needs to be taken out separately and fixed at a relative position, such as top:50%; margin-top:*px. This way there will be no deformation at any height.

Answer 2

Use @media to set different resolutions. It may not be a problem if some fonts are not distinguished. Just distinguish the size of the large circles

Answer 3

Image background processing method
background-size:cover;
background-position:center center;

img picture
position:absolutel;top:50%;left:50%;margin: negative number half the height of the image 0 0 negative number half the width of the image