我妈已经三天没打我了 2023-09-11 12:26 采纳率: 86%
浏览 5
已结题

qrcode.js二维码图片的位置怎么样能固定在框子里面啊

qrcode.js生成的二维码图片的位置怎么样能固定在框子里面啊?
这是写完的样子

img

改变手机型号图片就跑了

img

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no" />
  <title>扫码界面</title>
  <link rel="stylesheet" href="css/reset.css">
  <script type="text/javascript">
    document.write("<link rel='stylesheet' type='text/css' href='css/style.css?v=" + new Date().getTime() + "'>");
  </script>
  <style>
    body {
      background: url('./images/ScanCode_bg.png') no-repeat center center;
      background-size: cover;
      background-attachment: fixed;
      background-color: #fdd578;
      display: flex;
      justify-content: center;
    }

    .boundingBox {
      width: 13rem;
      height: 13rem;
      box-shadow: 0px 5px 11px 0px rgba(112, 145, 255, 0.2);
      border-radius: 10px;
      border: solid 1px #98cfff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 1.8rem;
    }

    .innerBox {
      width: 9.2rem;
      height: 9.2rem;
      color: #98cfff;
      border-radius: 10px;
      border: solid 1px #98cfff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .innerBox div {
      width: 8.3rem;
      height: 8.3rem;
      display: fixed;
      margin:0 auto;
    }
  </style>
</head>

<body>
  <div class="boundingBox">
    <div class="innerBox">
      <!-- <div class='imgContain'><img></div> -->
      <div class="code"></div>
    </div>
  </div>
  <script src="js/main.js"></script>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/jquery.qrcode.min.js"></script>
  <script type="text/javascript">
    document.write("<script src='js/luck.js?v= " + new Date().getTime() + "'></s" + "cript> ");
    // var userid = getQueryPara("user_id");
    var openid = getQueryPara("user_openid");
    var userid = getQueryPara("userid");
    // var userid = '5139';
    // 页面一进来就获取二维码
    $(function () {

      $.ajax({
        url: 'https://tj-pxjqr-bg-devXXXXXXXX', //生产
        dataType: 'json',
        type: 'get',
        data: {
          user_id: userid,
          openid: openid,
        },
        contentType: 'application/json;charset=utf-8;',
        success: function (res) {
          jQuery('.code').qrcode({
            width: 205,
            height: 205,
            render: 'canvas', //设置渲染方式 table canvas 
            typeNumber: -1, //计算模式 
            correctLevel: 0, //纠错等级 
            background: '#ffffff', //背景颜色 
            foreground: '#000000', //前景颜色 
            // text:`https://tj-pxjqr-bg-dev.ihxlife.com:8000/FinancialQuestionnaire/ewm?user_id=${userid}` //链接
            text: 'https://sales.ruiinsurance.com/tj/hkxtTest/index.html?user_id=' + userid +
              '&user_openid=' + openid //链接

          });
        }
      })

    });
  </script>
</body>

</html>

  • 写回答

3条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-09-11 14:39
    关注

    【以下回答由 GPT 生成】

    问题分析: 通过代码可以看出,问题出在qrcode.js生成的二维码图片无法固定在框子内。根据代码中的描述,框子对应的 CSS 类名为 .boundingBox,通过设置该类名的样式来调整框子的大小和样式。

    解决方案: 1. 首先,在 HTML 文件的头部添加引用 qrcode.js 的代码:

    <script src="path/to/qrcode.min.js"></script>
    
    1. 然后,在 JavaScript 代码中初始化生成二维码:
    // 获取要生成二维码的 DOM 元素
    var qrcodeElement = document.querySelector('.md_img');
    // 获取框子的 DOM 元素
    var boundingBoxElement = document.querySelector('.boundingBox');
    // 生成二维码的内容
    var text = 'Hello, World!';
    // 设置二维码的大小
    var width = 128;
    var height = 128;
    // 创建二维码实例
    var qrCode = new QRCode(qrcodeElement, {
      text,
      width,
      height
    });
    
    1. 最后,注意 .boundingBox 类的样式需要进行调整,尤其是宽度和高度的设置:
    .boundingBox {
      width: 128px;
      height: 128px;
      box-shadow: 0px 5px 11px 0px rgba(112, 145, 181, 0.48);
    }
    

    解决方案中的代码只是示例代码,需要根据具体需求进行调整。希望对你有所帮助!如果还有其他问题,请随时提问。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月30日
  • 已采纳回答 9月22日
  • 创建了问题 9月11日

悬赏问题

  • ¥15 三分类机器学习模型可视化分析
  • ¥15 本地测试网站127.0.0.1 已拒绝连接,如何解决?(标签-ubuntu)
  • ¥50 Qt在release捕获异常并跟踪堆栈(有Demo,跑一下环境再回答)
  • ¥30 python,LLM 文本提炼
  • ¥15 关于将inet引入的相关问题
  • ¥15 关于一个倒计时的操作和显示设计
  • ¥15 提问STK的问题,哪位航天领域的同学会啊
  • ¥15 苹果系统的mac m1芯片的笔记本使用ce修改器使用不了
  • ¥15 单相逆变的电压电流双闭环中进行低通滤波PID算法改进
  • ¥15 关于#java#的问题,请各位专家解答!