满屏页面（图片充满整个屏幕）

最新推荐文章于 2021-07-29 00:10:41 发布

转载最新推荐文章于 2021-07-29 00:10:41 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yanyaya/blog/710265

文章标签：

#javascript #移动开发 #数据库 #ViewUI

本文介绍了一种使用CSS实现全屏背景图片的方法，并详细解释了如何使背景图片随浏览器窗口大小变化而自适应，同时避免图片变形及空白区域的出现。

2019独角兽企业重金招聘Python工程师标准>>>

1.设置一个大的div盒子，命名bigbox。不需要设置宽高值，在css当中设置html，body{height:100%}(保持在不同大小的浏览器窗口都是满屏显示)，再设置bigbox盒子{height:100%}（适应html的高度。）

2.添加背景图片，选区必须是足够大的高清图片。在盒子bigbox中添加img图片（第一子元素），给图片定义class为photo,在css中设置{width:100%;}(为了适应bigbox的宽度)。3.由于图片过大，会出现横向滚动条，所以给bigbox盒子添加{overflow：hidden}，隐藏超出的部分。另外，当浏览器窗口缩小的时候，图片的宽高值也会相应的缩小，当图片缩小到一定程度时，下方有空白区域的出现。则需要给图片photo设置{min-width:1200px;}(防止空白区域的出现)。***注意：***不能给图片photo设置高度100%值，则图片会变形。宁可让客户看到一部分，也不能让图片变形。如果父元素的宽度是100%显示。其中两块子元素左浮，右浮。当窗口缩小到一定程度，则出现子元素交错的情况。则给父级元素设置一个最小宽度min-width值.

转载于:https://my.oschina.net/yanyaya/blog/710265