图片铺满整个页面

图片铺满整个页面

我常使用的就两种方式:

第一种:直接引入img src

<img src="图片地址" width="100%" height="100%"><!--设置宽高都为100%-->

第二种:背景图background的形式

/*****************************/

第一种 取决与外层容器的宽高

注意：外层容器是否有脱离文档流的操作，比如浮动。可能会有影响

/*******************************/

第二种 决定因素有一下

1.注意外层容器的宽高

注意：外层容器是否有脱离文档流的操作，比如浮动。

2.最外层html标签是否设置宽高100%

html，body{
width:100%;
height:100%;
}

3.自身设置的size属性

div
{
background:url();/*背景图片路径*/
background-size:100%;/*不单独设置宽高，直接全设置为100%*/
background-repeat:no-repeat;/*此处设置图片不循环，当容器大小充足的时候会有图片的循环*/
}