APPCAN页面图片自适应等比例显示

<pre name="code" class="html"><!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=yes">
        <link rel="stylesheet" href="../css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="../css/ui-box.css">
        <link rel="stylesheet" href="../css/ui-base.css">
        <link rel="stylesheet" href="../css/ui-color.css">
        <link rel="stylesheet" href="../css/appcan.icon.css">
        <link rel="stylesheet" href="../css/appcan.control.css">
        <link rel="stylesheet" href="../css/styles/index.css">
       
    </head>
    <body class="um-vp bc-bg" scroll="yes">
        <div class="ub ub-ver uinn-a3 ub-fv">
            <div id="imgm" hidden onclick="qdiv()" style="position:fixed;height:100%;width:100%; top:0em;z-index: 3;background-color:black;">
               <div id="div_img" style="position:fixed ;width: 100%;height:80%">
                        <img id="img" src="" style="display:block;margin:0 auto;width: 80%" onload="adapt();"/>       
               </div> 
            </div> 
        </div> 
    </body>
    <script src="../js/appcan.js"></script>
    <script src="../js/appcan.control.js"></script>
    <script src="../js/common.js"></script>
    
    <script>
         var khd = appcan.getLocVal("khd");
         appcan.ready(function() {
                console.log(khd);
                //khd='../css/image/zwtp.png';
                //khd='../css/image/icon4.jpg';
                // khd='../css/image/icon1.jpg';
                $("#imgm").show();
                $("#imgm").find('img').attr({ src:khd, alt: "Image" });
            });
        function qdiv(){
              appcan.window.close(-1);
              $("#imgm").hide();
            };
            //尺寸大小适应
        function adapt(){ 
            var divWidth =parseInt($("#div_img").width()); //表格宽度 
            var divHeight =parseInt($("#div_img").height()); //表格宽度 
            var id="img";
            var imgWidth=0;
            var imgHeight=0;
            var hPw=0;
           // 具有较好的通用性
            var realH= document.getElementById(id).height || document.getElementById(id).style.height || document.getElementById(id).offsetHeight;
            imgHeight=parseInt(realH);
            var realW= document.getElementById(id).width || document.getElementById(id).style.width || document.getElementById(id).offsetWidth;
            imgWidth=parseInt(realW);
            hPw=imgHeight/imgWidth;
            if(imgWidth<divWidth){ 
                document.getElementById("img").style.height=divHeight*0.8; 
                 
            }else{ 
                document.getElementById("img").style.width=divWidth*0.8; 
                document.getElementById("img").style.height=divWidth*0.8*hPw; 
            } 
            if(imgHeight<divHeight){ 
                var cha=divHeight-imgHeight;
                var top=cha/divHeight/2;
                document.getElementById("div_img").style.top=top*100+'%'; 
                document.getElementById("img").style.height=divHeight; 
            }else{ 
                var cha=divHeight-divHeight*0.8;
                var top=cha/divHeight/2;
                document.getElementById("div_img").style.top=top*100+'%'; 
            } 
        } 
    </script>
</html>
APPCAN页面图片自适应等比例显示

猜你喜欢
