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

 

 

css 如何让图片全屏的问题


例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏,如何实现?
1、如果楼主只是将其当做一张图片显示,可以通过css控制,如img{width:100%;height:100%;}.

否则需要将其作为网页背景的话可以试试如下方法:

2、如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在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>

3、网页背景图片默认情况下是重复平铺满整个页面。上面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>

 

 

THE END
< <上一篇
下一篇>>