css 如何让图片全屏的问题

css 如何让图片全屏的问题

如何用css背景图片拉伸 以及100% 满屏显示呢


如果图片大小不是刚好吻合，那么实际的结果只是重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。
1、按照楼主所说：有一张1024*768的图片，想让他适应与所有的浏览器宽度：如下图

2、把body设置一个背景图片，因为整个页面都在body区域里面展示的；展示效果如下：

扩展：方法不是唯一的，当然你也可以设置一个区域控制整个页面的主体区域main，那么给这个区域设置一个背景图片，控制图片img width:100%; height:100%让图片完全展示，再调整一下css即可；

可以通过css控制，如img{width:100%;height:100%;}
用作背景图片的话，解决方法比较复杂。
你可以设置两层div，底层div当作背景，第二层放网页内容。

网页背景图片默认情况下是重复平铺满整个页面。上面2方法是要求图片不重复，但又得占满浏览器所采用的方法。

1、如果楼主只是将其当做一张图片显示，可以通过css控制，如img{width:100%;height:100%;}.
否则需要将其作为网页背景的话可以试试如下方法：
2、如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。
这时可以拐个弯，设置两层div，底层div当做背景使用，放置一张图片即可。

再将网页内容放置到第二层上