1.`html`部分的代码

<body>
  <div class="container">
    <!-- 数据展示区域 -->
    <div class="box">
      <div class="top">top</div>
      <div class="bottom">bottom</div>
    </div>
  </div>
</body>

2.`css`部分的代码

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* html,
    body {
      width: 100%;
      height: 100%;
    } */

    .container {
      /* width: 100%;
      height: 100%; */
      width: 100vw;
      height: 100vh;
      background: url(./bg.png) no-repeat;
      background-size: cover;
    }

    .box {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 1920px;
      height: 1080px;
      background-color: #bfa;
      transform: scale(1.1);
      transform-origin: left top;
    }

    .top {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .bottom {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

3.`js`部分的代码

// 获取 box 元素
  let box = document.querySelector('.box')
  // 设置 box 元素的 transform 样式，实现缩放和居中
  box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`

  // 计算缩放比例
  function getScale (w = 1920, h = 1080) {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h

    // 返回宽高比例较小的值，保证元素能够完全显示在屏幕内
    return ww < wh ? ww : wh
  }

  // 监听窗口变化，重新计算缩放比例并设置 transform 样式
  window.onresize = function () {
    box.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }