图片自适应

标签：size   get   cli   nload   ret   func   java   封装   window   

<script type="text/javascript">
function $(id) { //id的封装
return document.getElementById(id);
}
function cWidth() {
return document.documentElement.clientWidth;
}
function cHeight() {
return document.documentElement.clientHeight;
}
var oFirstbox0=$(‘img0‘);
var oFirstbox1=$(‘img1‘);
var oFirstbox2=$(‘img2‘);
var oFirstbox3=$(‘img3‘);
window.onload=window.onresize=function () { //图片自适应
function fn2(obj) {
var wt=cWidth();
var ht=cHeight();
if((wt/ht)>(1920/1080)){
obj.style.width=‘100%‘;
// obj.style.height=wt*(1080/1920)+‘px‘;
obj.style.top=(ht-wt*(1080/1920))/2+‘px‘;
obj.style.left=‘0‘;
}
// 可视区域的宽/高<图片的宽/高时
if((wt/ht)<(1920/1080)){
// obj.style.height=‘100%‘;
obj.style.width=ht*(1920/1080)+‘px‘;
obj.style.left=(wt-ht*(1920/1080))/2+‘px‘;
obj.style.top=‘0‘;
}
}
fn2(oFirstbox0);
fn2(oFirstbox1);
fn2(oFirstbox2);
fn2(oFirstbox3);
};

</script>

图片自适应

标签：size   get   cli   nload   ret   func   java   封装   window   

原文地址：http://www.cnblogs.com/yongwang/p/6739999.html