1. 外部盒子
![](https://img-blog.csdnimg.cn/direct/934a62993051443d82ac698281c317e9.png)
![](https://img-blog.csdnimg.cn/direct/bcec1bc497494c74a2beeefa406f7ed2.png)
.screenBox {
width: 100vw;
height: 100vh;
background: url("@/assets/images/bg.png") no-repeat;
background-size: cover;
}
2.比例盒子
![](https://img-blog.csdnimg.cn/direct/1156611c4cac4b309835680b3c5c794a.png)
![](https://img-blog.csdnimg.cn/direct/5d504e4eabc6473baf50cfb2b1df304d.png)
![](https://img-blog.csdnimg.cn/direct/06a3328feee64d759a5b7660e79b720b.png)
外层盒子css定义
.boxScale {
width: 1920px;
height: 1080px;
background-color: orange;
transform-origin: left top;
position: fixed;
left: 50%;
top: 50%;
}
盒子缩放比例js代码
const boxScale = ref<HTMLElement | null>(null)
// 计算缩放比例
const getScaleValue = (w=1920,h=1080)=>{
const ww = window.innerWidth / w
const hh = window.innerHeight / h
return ww < hh ? ww : hh
}
// 当windows尺寸发生变化时 更改缩放比例
onMounted(()=>{
boxScale.value.style.transform = `scale(${getScaleValue()}) translate(-50%,-50%)`
window.onresize = ()=>{
boxScale.value.style.transform = `scale(${getScaleValue()}) translate(-50%,-50%)`
}
})
实现效果 :多少像素多少缩放比例 盒子内容都是不会变化的
![](https://img-blog.csdnimg.cn/direct/1042936f33a747a4bd5536a5d7a671aa.png)
![](https://img-blog.csdnimg.cn/direct/df603fc91810490dafd9a872c860a28b.png)