qrcode.js生成的二维码图片的位置怎么样能固定在框子里面啊?
这是写完的样子
改变手机型号图片就跑了
<!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>