实现背景图片随窗口大小变化而变化（不变形）

飞天的毛毛虫

已于 2022-06-15 15:39:38 修改

阅读量3.1k

点赞数 3

文章标签： css linq html

于 2022-06-15 14:50:17 首次发布

本文链接：https://blog.csdn.net/weixin_44191318/article/details/125296701

版权

我的背景图是比例是1920 x 1080的（这个可以根据具体要是用的背景图比例去替换调试），然后利用css属性transform中的scale和translate按照图片的比例同时来控制，效果图如下：

项目代码如下：

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