<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
box-sizing: border-box;
}
html,body {
width: 100vw; height: 100vh;
}
body {
margin:0;
display: flex;
justify-content: center;
}
.bigScreenBox {
overflow: hidden;
}
.bigScreen {
width: 1920px;height: 1080px;
background-color: #05203d;
border: 10px solid #1f93f1;
transform-origin: top left;
}
</style>
</head>
<body>
<div class="bigScreenBox">
<div class="bigScreen"></div>
</div>
<script>
let screenWidth = window.screen.width;
let screenHeight = document.body.clientHeight;
let sx=screenWidth/1920
let sy = screenHeight/1080
console.log(screenWidth, screenHeight)
console.log(sx, sy)
let s = sx<sy?sx:sy
//document.querySelector('.bigScreen').style.transform=`scaleX(${sx}) scaleY(${sy})`
document.querySelector('.bigScreenBox').style.width=`${1920*s}px`
document.querySelector('.bigScreenBox').style.height=`${1080*s}px`
document.querySelector('.bigScreen').style.transform=`scale(${s})`
</script>
</body>
</html>
![[C#]winformYOLO区域检测任意形状区域绘制射线算法实现](https://img-blog.csdnimg.cn/direct/156cdd360787435eb5b95ef38bb5d453.png)
