Index: ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp
===================================================================
diff -u -r27665 -r27668
--- ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp	(.../tousseImage.jsp)	(revision 27665)
+++ ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp	(.../tousseImage.jsp)	(revision 27668)
@@ -189,41 +189,80 @@
 			document.getElementById('tousseOrMaterialImage').src = imgUrl;
 			var img = new Image();
 			img.src = imgUrl;
-			img.onload =function(){
-				var divWidth = $('#tousseOrMaterialImageDiv').width();
-				var divHeight = $('#tousseOrMaterialImageDiv').height();
+			var divWidth = $('#tousseOrMaterialImageDiv').width();
+			var divHeight = $('#tousseOrMaterialImageDiv').height();
+
+			if(img.width){
 				if(img.width > img.height){
 					if(img.width > divWidth){
 						$('#tousseOrMaterialImage').css({
 							width:'100%',
-							height:'auto'
+							height:'auto',
+							left:0,
+							top:(divHeight > img.height)?((divHeight-img.height)/2):0
 						});
 					}else {
 						$('#tousseOrMaterialImage').css({
 							width:'auto',
-							height:'auto'
+							height:'auto',
+							left:(divWidth-img.width)/2,
+							top:(divHeight > img.height)?((divHeight-img.height)/2):0
 						});
 					}
 				}else {
 					if(img.height > divHeight){
 						$('#tousseOrMaterialImage').css({
 							width:'auto',
-							height:'100%'
+							height:'100%',
+							top:0,
+							left:(divWidth > img.width)?((divWidth-img.width)/2):0
 						});
 					}else {
 						$('#tousseOrMaterialImage').css({
 							width:'auto',
-							height:'auto'
+							height:'auto',
+							top:(divHeight-img.height)/2,
+							left:(divWidth > img.width)?((divWidth-img.width)/2):0
 						});
 					}
 				}
+			}else {
+				img.onload =function(){
+					if(img.width > img.height){
+						if(img.width > divWidth){
+							$('#tousseOrMaterialImage').css({
+								width:'100%',
+								height:'auto',
+								left:0,
+								top:(divHeight > img.height)?((divHeight-img.height)/2):0
+							});
+						}else {
+							$('#tousseOrMaterialImage').css({
+								width:'auto',
+								height:'auto',
+								left:(divWidth-img.width)/2,
+								top:(divHeight > img.height)?((divHeight-img.height)/2):0
+							});
+						}
+					}else {
+						if(img.height > divHeight){
+							$('#tousseOrMaterialImage').css({
+								width:'auto',
+								height:'100%',
+								top:0,
+								left:(divWidth > img.width)?((divWidth-img.width)/2):0
+							});
+						}else {
+							$('#tousseOrMaterialImage').css({
+								width:'auto',
+								height:'auto',
+								top:(divHeight-img.height)/2,
+								left:(divWidth > img.width)?((divWidth-img.width)/2):0
+							});
+						}
+					}
+				}
 			}
-
-			$('#tousseOrMaterialImage').css({
-				left:'auto',
-				top:'auto',
-				position:'static'
-			})
         },
         error:function(XMLHttpRequest, textStatus, errorThrown){
         }
@@ -257,41 +296,80 @@
 	document.getElementById('tousseOrMaterialImage').src = imgUrl;
 	var img = new Image();
 	img.src = imgUrl;
-	img.onload =function(){
-		var divWidth = $('#tousseOrMaterialImageDiv').width();
-		var divHeight = $('#tousseOrMaterialImageDiv').height();
+	var divWidth = $('#tousseOrMaterialImageDiv').width();
+	var divHeight = $('#tousseOrMaterialImageDiv').height();
+
+	if(img.width){
 		if(img.width > img.height){
 			if(img.width > divWidth){
 				$('#tousseOrMaterialImage').css({
 					width:'100%',
-					height:'auto'
+					height:'auto',
+					left:0,
+					top:(divHeight > img.height)?((divHeight-img.height)/2):0
 				});
 			}else {
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'auto'
+					height:'auto',
+					left:(divWidth-img.width)/2,
+					top:(divHeight > img.height)?((divHeight-img.height)/2):0
 				});
 			}
 		}else {
 			if(img.height > divHeight){
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'100%'
+					height:'100%',
+					top:0,
+					left:(divWidth > img.width)?((divWidth-img.width)/2):0
 				});
 			}else {
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'auto'
+					height:'auto',
+					top:(divHeight-img.height)/2,
+					left:(divWidth > img.width)?((divWidth-img.width)/2):0
 				});
 			}
 		}
+	}else {
+		img.onload =function(){
+			if(img.width > img.height){
+				if(img.width > divWidth){
+					$('#tousseOrMaterialImage').css({
+						width:'100%',
+						height:'auto',
+						left:0,
+						top:(divHeight > img.height)?((divHeight-img.height)/2):0
+					});
+				}else {
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'auto',
+						left:(divWidth-img.width)/2,
+						top:(divHeight > img.height)?((divHeight-img.height)/2):0
+					});
+				}
+			}else {
+				if(img.height > divHeight){
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'100%',
+						top:0,
+						left:(divWidth > img.width)?((divWidth-img.width)/2):0
+					});
+				}else {
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'auto',
+						top:(divHeight-img.height)/2,
+						left:(divWidth > img.width)?((divWidth-img.width)/2):0
+					});
+				}
+			}
+		}
 	}
-
-	$('#tousseOrMaterialImage').css({
-		left:'auto',
-		top:'auto',
-		position:'static'
-	})
 }
 function prevPage(){
 	if(isUndefinedOrNullOrEmpty(currentType)){
@@ -318,40 +396,80 @@
 	
 	var img = new Image();
 	img.src = imgUrl;
-	img.onload =function(){
-		var divWidth = $('#tousseOrMaterialImageDiv').width();
-		var divHeight = $('#tousseOrMaterialImageDiv').height();
+	var divWidth = $('#tousseOrMaterialImageDiv').width();
+	var divHeight = $('#tousseOrMaterialImageDiv').height();
+
+	if(img.width){
 		if(img.width > img.height){
 			if(img.width > divWidth){
 				$('#tousseOrMaterialImage').css({
 					width:'100%',
-					height:'auto'
+					height:'auto',
+					left:0,
+					top:(divHeight > img.height)?((divHeight-img.height)/2):0
 				});
 			}else {
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'auto'
+					height:'auto',
+					left:(divWidth-img.width)/2,
+					top:(divHeight > img.height)?((divHeight-img.height)/2):0
 				});
 			}
 		}else {
 			if(img.height > divHeight){
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'100%'
+					height:'100%',
+					top:0,
+					left:(divWidth > img.width)?((divWidth-img.width)/2):0
 				});
 			}else {
 				$('#tousseOrMaterialImage').css({
 					width:'auto',
-					height:'auto'
+					height:'auto',
+					top:(divHeight-img.height)/2,
+					left:(divWidth > img.width)?((divWidth-img.width)/2):0
 				});
 			}
 		}
+	}else {
+		img.onload =function(){
+			if(img.width > img.height){
+				if(img.width > divWidth){
+					$('#tousseOrMaterialImage').css({
+						width:'100%',
+						height:'auto',
+						left:0,
+						top:(divHeight > img.height)?((divHeight-img.height)/2):0
+					});
+				}else {
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'auto',
+						left:(divWidth-img.width)/2,
+						top:(divHeight > img.height)?((divHeight-img.height)/2):0
+					});
+				}
+			}else {
+				if(img.height > divHeight){
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'100%',
+						top:0,
+						left:(divWidth > img.width)?((divWidth-img.width)/2):0
+					});
+				}else {
+					$('#tousseOrMaterialImage').css({
+						width:'auto',
+						height:'auto',
+						top:(divHeight-img.height)/2,
+						left:(divWidth > img.width)?((divWidth-img.width)/2):0
+					});
+				}
+			}
+		}
 	}
-
-	$('#tousseOrMaterialImage').css({
-		left:'auto',
-		top:'auto'
-	})
 }
 /**
  * 图片放大
@@ -734,6 +852,16 @@
 	display: table-cell;
     vertical-align: middle;
 }
+#tousseOrMaterialImageDiv {
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+#tousseOrMaterialImage {
+	position: absolute;
+	left: 0;
+	top: 0;
+}
 </style>   
 
 
@@ -757,8 +885,8 @@
 						<a href="javascript:void(0)" onclick='loadTousseImage();'>查看包图片</a>
 					</div>
 				   </div>
-				   <div id="tousseOrMaterialImageDiv" style="overflow: auto;display:table-cell;vertical-align:middle;text-align: center;position: relative;">
-						<img id="tousseOrMaterialImage" style="vertical-align:middle;text-align:center;position: absolute;"/>
+				   <div id="tousseOrMaterialImageDiv">
+						<img id="tousseOrMaterialImage"/>
 				   </div>
 			</div>
             <div class="image-box" id="MaterialDIV">