<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页背景图自适应</title>
<style type="text/css">
#home_con{ position:relative; 100%; overflow:hidden; height:824px; background:url(images/banner.jpg) no-repeat center center; background-size:100% auto;}
#home_con .word{ position:absolute; left:50%; 814px; height:114px; margin-left:-407px; color:#fefefe; top:92px; text-align:center;}
#home_con .word h3{ margin-bottom:8px;}
#home_con .word h3 span{ font-size:25px; font-weight:bold; line-height:33px; letter-spacing:1px; border-bottom:2px solid #cfd6e4;border-bottom:2px solid rgba(255,255,255,0.35);}
#home_con .word p span{ font-size:16px; text-align:center; padding:0 21px;}
#home_con .word a{ display:block; text-align:center; margin-top:28px; font-size:14px; color:#fff; }
#home_con .word a:hover{ text-decoration:underline;}
</style>
</head>
<body>
<div id="header"></div>
<div id="home_con">
<div class="word">
<h3><span>SYNERGISTIC INVESTMENT FOR SUSTAINABLE ECONONIC GROWTH</span></h3>
<p><span>INVESTMENT</span><span>MANAGEMENT</span><span>SYNERGY</span><span>GROWTH</span><span>PROSPERITY</span>
</p>
<a href="About.shtml">More About CASIF ></a>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<script>
$(function(){
var conH=$(window).height()-$("#header").outerHeight()-$("#footer").outerHeight();
if($(window).width()/conH>=2.33){
$("#home_con").height(conH);
$("#home_con").css({ "background-size":"100% auto"});
}
else{
$("#home_con").height(conH);
$("#home_con").css({ "background-size":"auto 100%"});
}
$(window).resize(function(){
var conH=$(window).height()-$("#header").outerHeight()-$("#footer").outerHeight();;
if($(window).width()/conH>=2.33){
$("#home_con").height(conH);
$("#home_con").css({ "background-size":"100% auto"});
}
else{
$("#home_con").height(conH);
$("#home_con").css({ "background-size":"auto 100%"});
}
});
});
</script>