手机网页：点击图片后，显示满屏的大图
竖版图片：直接充满屏幕。
横版图片：旋转后充满屏幕。
<!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>