Sina Banner Slider 确保不同分辨率下全宽显示图片

问题:客户说banner图显示不完整,每次都会变化,而且在缩放过程中也会出现页面较大变化的瑕疵。

思路:

1.Banner图变化较大,首先是图片本身问题,客户设计师给出的4版图片都无法完全显示,那么要找出合适的比例。

2.既然客户会利用浏览器的比例缩放,那么如果容器不一致,比如banner是百分比显示,而其他容器是px显示,就会出现。

3.如果banner按照固定px设置,则会出现banner无法全宽的问题。

解决方案:

1.经过与元宝沟通,我重新做了banner图,比例为1920*600.

核心话术为”给我一版 1920×600 左右的图,核心内容放在中间 1400px 安全区内,两边可以延伸但不要太重要。”,给出了参考图片。

2.既然要解决缩放问题,那么就全部设定为px固定格式,这样就不会出现缩放出现不统一变化的情况,就像pdf文件一样同时变化。

3.出现无法全宽的问题,则采用新的架构,避免出现问题。banner第一层设置为固定2560px,确保这个分辨率可以看到全宽。banner二层设计全宽100%。Sina Banner Slider同样设置为全宽100%。高度设为800px,保证富裕。

4.整个外层套一层flexbox,保证统一性。

About the Author

懒码虫

遇到问题,发现问题,解决问题。

You may also like these