方法1:background-size:100% 100%;
方法2:
.ztcrnav .lbg{position:absolute; overflow:hidden; z-index:0;}
.ztcrnav .posm{position:relative; height:100%;}
<div class="node ztcrnav">
<div class="lbg">
<img src="images/lbg.jpg" />
</div>
<div class="posm">
现在容器里来一个绝对定位容器,里面放张图片。
然后相对一个容器放在绝对上面。
测试可行。
实际使用时代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>曙光医院</title>
<style>
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Microsoft Yahei";
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font:normal 100%;
}
body,html {
width: 100%;
height: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
ol,ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%; border:none;
}
.node{width:100%; overflow:hidden;}
.ztnav{ margin-top:2px;}
.ztnav li{ list-style:none; width:20%; float:left;}
.zttop{ border-top:solid 3px #dadada; border-bottom:solid 1px #dadada;}
.zttop .ba{width:26%; border-right:1px solid #dadada; margin:5px; float:left;}
.zttop .t0{width:64%; float:left; color:#6b6b6b;}
.zttop .t0 .t1{color:#6b6b6b; overflow:hidden; margin-top:4px; font-size:0.9em;}
.zttop .t0 .t1 span{ color:#ff4700; font-weight:bold;}
.zttop .rarrow{width:4%; float:left; margin-top:1%;}
.zttop .t0 .bic { width:40%; font-size:0.7em; margin-top:1%;}
.zttop .t0 .bic img{ width:40%; vertical-align:middle;}
.zttop .t0 .bic .god{ width:50%; float:left;}
.zttop .t0 .bic .book{ width:50%; float:right;}
.ztcrnav{margin-top:1%;}
.ztcrnav .lbg{position:absolute; overflow:hidden; z-index:0;}
.ztcrnav .posm{position:relative; height:100%;}
.ztcrnav .posm .mid{width:96%; margin:0 auto;}
.ztcrnav .posm .mid .txt{float:left; width:40%; margin-top:5%; margin-left:1%;}
.ztcrnav .posm .mid .ot{float:right; width:26%; margin-top:5%;}
.ztcrnav .posm .crcbt{ width:92%; margin:2% auto; padding-bottom:4%; overflow:hidden;}
.ztcrnav .posm .crcbt li{ float:left; display:block; list-style:none; width:25%; margin:4% 4%; overflow:hidden;}
</style>
</head>
<body>
<div class="node"><img src="images/ind_01.jpg" /></div>
<div class="node"><img src="images/ind_02.jpg" /></div>
<div class="node ztnav">
<li><a href="javascripot:void(0)"><img src="images/na1.jpg" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/na2.jpg" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/na3.jpg" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/na4.jpg" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/na5.jpg" /></a></li>
</div>
<div class="node zttop">
<div class="ba"><img src="images/ind_09_03.jpg"/></div>
<div class="t0">
<div class="t1"><span>HOT:</span>这里整个应该是调用了个js</div>
<div class="bic">
<div class="god"><img src="images/ind_09_06.jpg" /> <span>258</span></div><div class="book"><img src="images/god.jpg"/><span>103</span></div>
</div>
</div>
<div class="rarrow"><img src="images/rarrow.jpg" /></div>
</div>
<div class="node"><img src="images/ind_05.jpg" /></div>
<div class="node ztcrnav">
<div class="lbg">
<img src="images/lbg.jpg" />
</div>
<div class="posm">
<div class="mid">
<div class="txt"><img src="images/ind_02.png"/></div>
<div class="ot"><a href="javascripot:void(0);"><img src="images/ot.png"/></a></div>
</div>
<div class="mid"><img src="images/ind_04.png" /></div>
<div class="mid crcbt">
<li><a href="javascripot:void(0)"><img src="images/a1.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a2.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a3.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a4.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a5.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a6.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a7.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a8.png" /></a></li>
<li><a href="javascripot:void(0)"><img src="images/a9.png" /></a></li>
</div>
</div>
</div>
<div><img src="images/ind_07.jpg" /></div>
<div><img src="images/ind_08.jpg" /></div>
<div><img src="images/ind_09.jpg" /></div>
<div><img src="images/ind_10.jpg" /></div>
<div><img src="images/ind_11.jpg" /></div>
<div><img src="images/ind_12.jpg" /></div>
</body>
</html>