在css中如何让一个图片铺满全屏

 

 

css 如何让图片全屏的问题 css


例如我有一张1024*768的图片,可否让它在页面上显示全屏,不管电脑分辨率是1024*768仍是1440*900,我都想让这张图片全屏,如何实现?
一、若是楼主只是将其当作一张图片显示,能够经过css控制,如img{width:100%;height:100%;}.
不然须要将其做为网页背景的话能够试试以下方法:
二、若是这张图片为背景图片因为背景图片不具备伸缩性,只能经过别的方法绕着解决,在ie中能够用<body 
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。
这时能够拐个弯,设置两层div,底层div当作背景使用,放置一张图片便可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再将网页内容放置到第二层上<div id="content">页面内容</content>
三、网页背景图片默认状况下是重复平铺满整个页面。上面2方法是要求图片不重复,但又得占满浏览器所采用的方法。



示例代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
       
    .myLongDiv
    {
      top:80%;
      left:60%;
      border:1px;
      border-style:solid;
      border-color:White;
      position:absolute;
      width:240px;
      height:120px;
      margin:-250px 0 0 -200px;
      font-size:20px;
    }  
   
    </style>

 


</head>


<body bgcolor="#113eee">
    <form id="form1" runat="server">


 

    <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="/images/myPicture1.jpg" width="100%" height="100%"/>
     </div>
       
     <div class="myLongDiv" >
    <table>
    <tr>
    <td align="right" class="style1">用户名:</td><td class="style1">
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
    </tr>
    <tr><td align="right">密码:</td><td>
        <asp:TextBox ID="txtPassWord" runat="server"></asp:TextBox></td></tr>
    </table>
    <br />
        <div>
        <center>
            <asp:Button ID="btnLogin" runat="server" Text="登陆" Width="56px" BackColor="White" BorderColor="White"
                οnclick="btnLogin_Click" /> &nbsp &nbsp
            <asp:Button ID="btnCancle" runat="server" Text="取消" Width="63px" BackColor="White" BorderColor="White" />
        </center>
        </div>
   </div>

    </form>
</body> </html>