竖版图片：直接充满屏幕。
横版图片：旋转后充满屏幕。
<!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>
时间： 2024-11-13 09:01:23