Javascript 以英雄形象为背景

我试图把它作为我在网站上的一个页面。但我想做的是把整个东西放在一个540px的高度框中，宽度为100%（拉伸到浏览器边缘，保持宽高比）。但我似乎想不出一个办法来做到这一点。提前谢谢

下面是来自codepen的HTML、CSS和JS文件

console.clear（）；
var svg=document.querySelector（“demo”）；
var tl=新的TimelineMax（{onUpdate:onUpdate}）；
var pt=svg.createSVGPoint（）；
var data=document.querySelector（“.tlProgress”）；
var counter=document.querySelector（“计数器”）；
var比率=0.5625；
TweenMax.set（“#指令，#拨号，{xPercent:-50}”）；
TweenMax.set（“#progressing”{drawSVG:0}）；
tl.to（“#masker”，2，{attr:{r:2400}，ease:Power2.easeIn}）；
tl.反向（真）；
函数mouseHandler（）{
tl.reversed（！tl.reversed（））；
}
函数getPoint（evt）{
pt.x=evt.clientX；
pt.y=evt.clientY；
返回pt.matrixTransform（svg.getScreenCTM（）.inverse（））；
}
功能鼠标移动（evt）{
var newPoint=获取点（evt）；
TweenMax.set（“#dot”，{attr:{cx:newPoint.x，cy:newPoint.y}）；
TweenMax.to（“#ring，#masker”，0.88，{attr:{cx:newPoint.x，cy:newPoint.y}，ease:Power2.easeOut}）；
}
函数onUpdate（）{
var prog=（tl.progress（）*100）；
TweenMax.set（“#progressing”，{drawSVG:prog+“%”）；
counter.textContent=prog.toFixed（）；
}
函数newSize（）{
var w=窗内宽度；
var h=窗内高度；
如果（w>h*（16/9））{
TweenMax.set（“#demo”，{attr:{width:w，height:w*ratio}）；
}否则{
TweenMax.set（“#demo”，{attr:{width:h/比率，height:h}）；
}
var data=svg.getBoundingClientRect（）；
TweenMax.set（“#demo”，{x:w/2-data.width/2}）；
TweenMax.set（“#demo”，{y:h/2-data.height/2}）；
}
window.addEventListener（“mousedown”，mouseHandler）；
window.addEventListener（“mouseup”，mouseHandler）；
window.addEventListener（“mousemove”，mousemove）；
newSize（）；
addEventListener（“调整大小”，新闻大小）
正文{
填充：0；
保证金：0；
字体系列：“Signika”，无衬线；
背景：#262626；
高度：100vh；
宽度：100%；
溢出：隐藏；
颜色：白色；
}
p{
保证金：0；
文本对齐：居中；
空白：nowrap；
}
* {
框大小：边框框；
}
#演示{
光标：无；
位置：绝对位置；
}
#指示{
位置：绝对位置；
填充：12px；
底部：20px；
背景：rgba（0,0,0,0.75）；
左：50%；
光标：无；
填充顶部：100px；
用户选择：无；
边界半径：4px；
}
#拨盘{
位置：绝对位置；
排名：0；
左：50%；
}

%
0
将鼠标悬停以移动遮罩

持有及；释放鼠标按钮以展开&；合同面具

这就是你想要的吗


console.clear（）；
var svg=document.querySelector（“demo”）；
var tl=新的TimelineMax({
onUpdate：onUpdate
});
var pt=svg.createSVGPoint（）；
var data=document.querySelector（“.tlProgress”）；
var counter=document.querySelector（“计数器”）；
var比率=0.5625；
TweenMax.set（“#指令，#拨号”{
X百分比：-50
});
TweenMax.set（“#progressing”{
绘图：0
});
tl.to（“#遮罩者”），2{
属性：{
r:2400
},
ease:Power2.easeIn
});
tl.反向（真）；
函数mouseHandler（）{
tl.reversed（！tl.reversed（））；
}
函数getPoint（evt）{
pt.x=evt.clientX；
pt.y=evt.clientY；
返回pt.matrixTransform（svg.getScreenCTM（）.inverse（））；
}
功能鼠标移动（evt）{
var newPoint=获取点（evt）；
TweenMax.set（“#点”{
属性：{
cx:newPoint.x，
西：纽波特
}
});
TweenMax.到（“#戒指，#面具”，0.88{
属性：{
cx:newPoint.x，
西：纽波特
},
ease:Power2.easeOut
});
}
函数onUpdate（）{
var prog=（tl.progress（）*100）；
TweenMax.set（“#progressing”{
drawSVG:prog+“%”
});
counter.textContent=prog.toFixed（）；
}
函数newSize（）{
var w=窗内宽度；
var h=窗内高度；
如果（w>h*（16/9））{
TweenMax.set（“演示”{
属性：{
宽度：w，
高度：宽*比
}
});
}否则{
TweenMax.set（“演示”{
属性：{
宽度：h/比，
身高：h
}
});
}
var data=svg.getBoundingClientRect（）；
TweenMax.set（“演示”{
x:w/2-数据宽度/2
});
TweenMax.set（“演示”{
y:h/2-数据高度/2
});
}
window.addEventListener（“mousedown”，mouseHandler）；
window.addEventListener（“mouseup”，mouseHandler）；
window.addEventListener（“mousemove”，mousemove）；
newSize（）；
addEventListener（“调整大小”，新闻大小）
正文{
填充：0；
保证金：0；
字体系列：“Signika”，无衬线；
背景：#262626；
高度：100vh；
宽度：100%；
溢出：隐藏；
颜色：白色；
}
p{
保证金：0；
文本对齐：居中；
空白：nowrap；
}
* {
框大小：边框框；
}
#演示{
光标：无；
位置：绝对位置；
宽度：100%；
高度：540px；
变换：矩阵（2,0,0,2,0,0）；
}
#指示{
位置：绝对位置；
填充：12px；
底部：20px；
背景：rgba（0,0,0,0.75）；
左：50%；
转化：translateX（-50%）；
光标：无；
填充顶部：100px；
用户选择：无；
边界半径：4px；
}
#拨盘{
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
}
梅因先生{
位置：相对位置；
高度：540px；
溢出：隐藏；
}

%
0
将鼠标悬停以移动遮罩

持有及；释放鼠标按钮以展开&；合同面具

高度正确，但我希望宽度延伸到浏览器边缘。这意味着540px的盒子从左边缘延伸到右边缘。谢谢。你想让图像接触到屏幕的边缘吗？这可能会导致图像上下被剪裁。好的，这也是我想要的。@ThisuraDeSilva现在试试看