<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>