<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*1660及以上*/
.box {
background-color: #ccc;
border-radius: 5px;
width: 500px;
height: 695px;
right: 127px;
position: absolute;
transform: scale(calc(1920 / 1660)) translateY(-50%);
transform-origin: left top;
top:50%;
/* 上下居中后 顶91 底114 偏移量 (114 - 91) / 2 */
margin-top: -11.5px;
}
/*1440-1660*/
@media screen and (max-width: 1661px) {
.box {
transform: scale(calc(1660 / 1440)) translateY(-50%);
}
}
/*1366-1440*/
@media screen and (max-width: 1441px) {
.box {
transform: scale(1) translateY(-50%);
}
}
/*1367及以下*/
@media screen and (max-width: 1367px) {
.box {
transform: scale(calc(1366 / 1440)) translateY(-50%);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>