Realize that the background image changes with the window size (no deformation)

The ratio of my background image is 1920 x 1080 (this can be replaced and debugged according to the specific background image ratio used), and then use the scale and translate in the css attribute transform to control the ratio of the image at the same time. The effect diagram is as follows:

The project code is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现背景图跟着窗口大小变化（不变形）</title>
    <!-- 使用页面嵌套式样式引入 -->
    <style>
      /* 需要给web页面元素“初始化” */
      html,
      body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #000;
      }
      /* 需要有一个背景图的大盒子样式 */
      .wrap_bg {
        position: relative;
        width: 100%;
        height: 100%;
      }
      /* 此处是设置背景图的元素样式 */
      .bg_img {
        position: absolute;
        /* 背景图原始比例 */
        width: 1920px;
        height: 1080px;
        /* 引入背景图片 */
        background-image: url(./images/beijing_1920X1080.jpg);
      }
    </style>
  </head>
  <body>
    <div class="wrap_bg">
      <div class="bg_img"></div>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script> //引入自己的jQuery，获取样式方便
    <!-- <script src="./js/index.js"></script> -->
    <script>
      // 窗口大小不变时--》保持背景图大小比例不变
      var imgDom = $(".wrap_bg"); //获取背景图外层盒子
      var winDom = $(window); //获取窗口
      var winHeight = winDom.height(); //获取窗口高度
      var winWidth = winDom.width(); //获取窗口宽度
      var x = winWidth / 1920;
      var y = winHeight / 1080;
      var scale;
      if (x > y) {
        scale = y;
        console.log(scale, 'x > y')
      } else {
        scale = x;
        console.log(scale, 'x <= y')
      }
      var x1 = (winWidth - 1920) / 2;
      var y1 = (winHeight - 1080) / 2;
      imgDom.css(
        "transform",
        "scaleX(" +
          scale +
          ") scaleY(" +
          scale +
          ") translateX(" +
          x1 +
          "px) translateY(" +
          y1 +
          "px)"
      );
      imgDom.css("width", winWidth);
      imgDom.css("height", winHeight);
      //使用resize（）监听窗口大小--》变换背景图的大小（始终保持背景图的比例不变）
      winDom.resize(function () {
        var imgDom = $(".wrap_bg"); //获取背景图外层盒子
        var winDom = $(window); //获取窗口
        var winHeight = winDom.height(); //获取窗口高度
        var winWidth = winDom.width(); //获取窗口宽度
        var x = winWidth / 1920;
        var y = winHeight / 1080;
        var scale;
        if (x > y) {
          scale = y;
          console.log(scale, '窗口在改变时x > y')
        } else {
          scale = x;
          console.log(scale, '窗口在改变时x <= y')
        }
        var x1 = (winWidth - 1920) / 2;
        var y1 = (winHeight - 1080) / 2;
        imgDom.css(
          "transform",
          "scaleX(" +
            scale +
            ") scaleY(" +
            scale +
            ") translateX(" +
            x1 +
            "px) translateY(" +
            y1 +
            "px)"
        );
        imgDom.css("width", winWidth);
        imgDom.css("height", winHeight);
      });
    </script>
  </body>
</html>

Realize that the background image changes with the window size (no deformation)

Guess you like