HTML设置背景图在不同分辨率显示全屏方法

时间:2024-10-13 18:55:36

由于分辨率越来越多样化,包括PC端、手机端还有IPAD等,为了能让背景图全屏显示,这里总结了几种方法,各有优缺点,可根据项目情况进行选择,往后项目过程中如有更好的方法会进行补充:1.利用样式让背景图全屏显示;2.利用js计算让背景图全屏显示。

工具/原料

Sublime Text

Chrome浏览器调试

利用样式让背景图全屏显示

1、第一种body标签添加图一中的css样式,这种方法有两点缺点: 背景图为了适配不同比例的屏幕会导致变形; 当数据超过一屏幕时候,滚动到下一屏幕,背景是空白的。针对上面两点问题,可以修改样式解决,把background-size注释掉,background添加top center,这样图片就不会变形,但不会显示全部图片内容,会根据不同分辨率显示图片顶部和中间部分,适用于顶部有内容,底部纯色或者渐变色,且图片要大过最大分辨率。第二点也可以把absolute改为fixed,背景固定不跟随内容滚动。

HTML设置背景图在不同分辨率显示全屏方法
HTML设置背景图在不同分辨率显示全屏方法

2、第二种body中第一行添加图一中的html和css样式,主要是利用img设置为width: 100%,height: 100%来实现全屏显示,要注意百分比是相对于父元素,所以父元素body要设置height: 100%;但也存在第一种的两点缺点,解决方法如第一种。

HTML设置背景图在不同分辨率显示全屏方法

利用js计算让背景图全屏显示

1、如下图代码,跟利用样式的第二种区别在于利用js计算屏幕的宽高赋予img达到显示全屏。利用js算出背景图宽高和屏幕宽高绿理猸搋差,不缩放背景图,而是改动top和left,使背景图在屏幕一直显示中间部分,可以解决图片变形问题和超过一屏幕空白问题,但无法全部显示,且图片要大过最大屏幕分辨率。注释掉html(body)的height: 100%,也可以显示超过一屏幕,但图片会变形。

HTML设置背景图在不同分辨率显示全屏方法
© 手抄报圈