手机网页：点击图片后，显示满屏的大图

竖版图片：直接充满屏幕。
横版图片：旋转后充满屏幕。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#img123").attr("data-w",$("#img123").width());//初始化
    $("#img123").attr("data-h",$("#img123").height());

    $("#img123").click(function(){
        if( $(this).hasClass("img123") ){
                $(this).removeClass("img123");
                $(this).removeClass("rotate");
                $("#fix_box").removeClass("fix-box");

                $(this).width($(this).attr("data-w"));
                $(this).height($(this).attr("data-h"));
                $(this).css("left","0");
                $(this).css("top","0");

        }else{
                $("#fix_box").addClass("fix-box");
                var W=$(document).width();
                var H=$(document).height();
                var _w = parseFloat( $(this).attr("data-w") );
                var _h = parseFloat( $(this).attr("data-h") );
                if(_w>_h){    //宽大于高，旋转
                    $(this).addClass("img123");
                    $(this).addClass("rotate");

                    $(this).width(H).height(W);
                    $(this).css({ "left":(H/2)*-1 + "px",  "top":(W/2)*-1 + "px"});
                }else{        //宽小于高，保持原状
                    $(this).addClass("img123");
                    $(this).width(W).height(H);
                    $(this).css({ "left":(W/2)*-1 + "px",  "top":(H/2)*-1 + "px"});
                }
        }
    });

});
</script>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
#img123{width:100%;}
.fix-box{position:fixed;left:50%;right:50%;top:50%;bottom:50%;width:1px;height:1px;}/*容器，定位于页面中心点，以便图片旋转1*/
.img123{position:absolute;}
.rotate{transform:rotate(90deg);}
</style>
<div id="fix_box">
<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=99a3e11b544e9258a63480efac83d1d1/c2fdfc039245d68844bfbbdba6c27d1ed21b240b.jpg" id="img123"> 
<!-- 
<img src="http://d.hiphotos.baidu.com/image/w%3D310/sign=7625ed5c71f082022d92973e7bfafb8a/267f9e2f07082838c45ed56bba99a9014c08f17a.jpg" id="img123">
<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=99a3e11b544e9258a63480efac83d1d1/c2fdfc039245d68844bfbbdba6c27d1ed21b240b.jpg" id="img123"> 
-->
</div>




</body>
</html>