css 如何让图片全屏的问题

html-css019

css 如何让图片全屏的问题,第1张

css设置背景图片全屏，如果只是将其当做一张图片显示，可以通过css控制。超大图片，引入进来即可根据大小缩放。

如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。

具体解决方法如下： 

1、创建以下目录结构的测试页面。

2、将测试图片显示在浏览器界面上，效果如下。

3、通过CSS设置背景图片，默认效果如下，图片被自动重复以铺满窗口。

4、通过CSS设置背景图片不重复，此时，图片将不能铺满窗口。

5、通过CSS设置图片大小100%，效果如下，图片铺满窗口。

6、通过CSS设置图片大小cover，效果如下，图片铺满窗口。

1、首先需要新建一个HTML页面。

2、然后输入页面的标题，可以按照下方图中的进行设置。

3、然后在根据下方图片中的代码进行编辑，

4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。

5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。

6、然后在输入命令.img img{ width:100%height:auto}，这样就完成了。