您的位置:首页 > 其它

满屏页面(图片充满整个屏幕)

2016-07-12 00:00 239 查看
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值.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: