按比例自适应 js实现

最新推荐文章于 2024-04-29 11:17:53 发布

chuanghua8764

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量249

点赞数

原文链接：https://my.oschina.net/wgc2010/blog/2961179

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>CBD</title>
<style>
html,body,div,p,h1,h2,h3,h4,h5,li,ul{padding:0;margin:0;}
html,body{height:100%;overflow: hidden;}
body{background: #000}
#working{
position: relative;
box-sizing:border-box;
transform:translateY(-5%);
}
#bg-img{width:100%;position:absolute;z-index:-5;border:none;display:none}
#big-img{width:100%;border:none;display:block}
.a-div{position: absolute;left: -86px;right:-86px;height:60px;line-height: 60px;top:50%;transform:translateY(calc(-50% - 15px));color:#fff;font-size: 25px;font-weight: 400;bordera: 1px solid blue;}
.a-left-txt,.a-right-txt{position: absolute;top:0px;transition:all .3s}
.a-right-txt{right: 0;}
a{color:#fff;}
</style>
</head>
<body>
<div class="full-screen">
<div id="working">
<img id="big-img" alt="CBD">
</div>
</div>
</body>

function getDomById(id) {
return document.getElementById(id);
}

function getDomByTagName(className) {
return document.getElementsByTagName(className);
}
function getDomByClass(className) {
return document.getElementsByClassName(className);
}

var bgImg=getDomById("bg-img");
bgImg.style.display="block"

window.οnresize=function(){
W=document.documentElement.clientWidth || document.body.clientWidth
H=document.documentElement.clientHeight || document.body.clientHeight
// if(W<750){W=750};
// if(H<500){H=500};

if(W/originalW>H/originalH){
// H为主
var h1=H;
var w1=h1*originalW/originalH;

}else if(W>originalW && W>originalH){
var w1=originalW;
var h1=originalH;
}else{
// W为主
var w1=W;
var h1=w1*originalH/originalW;
}

working.style.height=h1+'px'
working.style.width=w1+'px'
working.style.marginTop=(H-h1)/2+'px'
working.style.marginLeft=(W-w1)/2+'px'
}
</script>
</html>

转载于:https://my.oschina.net/wgc2010/blog/2961179