解决资源图片变形问题

css/common.css

.defaultColor{ color:#333;}
/*文字*/
.h1Font{font-size:20px;} /*标题*/
.h2Font{font-size:18px;} 
.h3Font{font-size:16px;} 
.h2Font{font-size:18px; line-height:30px; color:#333; } 
.h3Font{font-size:16px; line-height:28px; color:#555; } 
.h4Font{font-size:14px; line-height:26px; color:#333;} 
.h5Font{font-size:14px; line-height:22px; color:#666;} 
.h6Font{font-size:13px;color:#888;margin-left:8px;} 
.myWorkspace{font-size: 14px;line-height:40px; text-align: center;float: left; margin-top: 10px;color: #fff;}
/*主体部分*/
#container{ min-width:1100px;min-height:90%; background:#fff;overflow: hidden;}
.contentBody{width:1050px;height:auto; margin:10px auto; padding:80px 0 2px 0; }
/*footer部分*/
#footer{ min-width:1100px;background:#ff9900;clear: both;height:100px; position: relative; z-index: 1001; text-align:center;}
#footer .wrapper {margin-left:80px;position: relative;padding: 15px 20px; min-width:1000px;}
.nodatabox .txtbox .keyword{ padding:0 6px;color:#555555;}
/***********************缺省页面*******************/
.ResImgBox{display: inline-block;text-align: center;max-width:64px;width:64px;height:60px;padding:1px;background:#FAFAFA;border:1px solid #F8F8F8;overflow: hidden;padding:2px; margin: 6px 0;border-radius:4px;}
.ResImgBox{display: inline-block;text-align: center;max-width:100px;margin:6px 0;width:100px;height:100px;background:#FAFAFA;border:1px solid #F8F8F8;overflow: hidden;padding:1%;border-radius:4px;}
.ResImgBox .resImg{max-width: 100%;max-height: 100%;vertical-align: middle;position: relative;}
.ResImgBox:before {content: ' ';display: inline-block;vertical-align: middle;width: 0;height: 100%;overflow: hidden;margin-left: -4px;}
.ResImgBox:before {content: ' ';display: inline-block;vertical-align: middle;width: 0;height: 100%;overflow: hidden;margin-left: 0px;}

css/index.css

.coulstblock .coulstbox .prohead{ width:80px;margin-left:40px; overflow:hidden;}
.coulstblock .coulstbox .proinfomation{margin:0 2%;width:60%; overflow:hidden;}
.coulstblock .coulstbox .coulstbtn{padding:24px 10px; margin-right: 20px;}
.coulstblock .coulstbox .coulstbtn span,#conbtn span{padding:5px 40px; display:block; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
.coulstbtn span,#conbtn span{padding:5px 40px;margin-right:6px; border-radius:4px; text-align:center; color:#fff; background:#ff9900;cursor:pointer}
/*专家信息头部*/
.information-head{ width:1050px; margin:auto;background:#fff; border:1px  solid #eaeaea; margin-top:30px; padding:20px 30px; position: relative;}
.head-left{ float:left;width:200px; height:200px; position:relative;overflow:hidden;}
.sharescrollbox .briefinfor{ width:100%; max-height:100px; text-overflow:ellipsis; overflow:hidden; color:#777; }
.sharescrollbox .shareshow{ position: relative; width: 200px; height: 200px;border-radius: 4px; overflow: hidden;}
.shareopeart{ position:absolute; bottom:0px; left:0px; z-index:100; overflow:hidden; width:100%;}
.sharebtn{ display:block; text-align:center; float:left; cursor:pointer; width:100%; height:30px;font-size:14px;line-height:30px; background:rgba(0,0,0,.2); color:#fff; border:1px solid #d6d6d6;}
.sharebtn{ display:block; text-align:center; float:left; cursor:pointer; width:100%; height:30px;font-size:14px;line-height:30px; background:rgba(0,0,0,.2); color:#fff; /*border:1px solid #d6d6d6;*/}
.sharebtn:hover{ color:#fff; background:#ff9900;}
.resoubtn{ position:absolute;top:40%; width:30px; height:41px; background:#ccc; border-width:1px 1px 0 1px; display:none; cursor:pointer;}
.resouprev{left:-4px;background:url(../images/arrows.png) -30px 0 no-repeat;}
.subuser li .evaimg{ display:block; width:60px; height:60px; overflow:hidden; border:1px solid #999; border-radius:4px; margin:auto;}
#evastarboxx .staspan{background: url(../images/evastar.png) 0 1px no-repeat;}
/*资源详细信息页面*/
.resouLeft{ width: 79%;/*border:1px solid #eaeaea;*/}
.resTop{padding:6px;position: relative;padding:20px 10px;background:#FFFFFF;}
.resBrief{width:60%;min-height: 300px;margin-right:1%;}
.subtit{color:#888888; padding-right:6px; }
.resAbout{margin:6px 0;padding: 4px 6px; background: #f0f0f0;margin-bottom: 46px;}
.resAbout .subtit{line-height: 36px; }
.resUlbox {margin: 1% 2%;}
.resUl {width:85%;color:#666666}
.resUl li{ float: left; margin: 1%;padding:4px 16px; background: #FFFFFF; /*border: 1px solid #e6e6e6;*/border-radius: 6px;}
.resBottom{margin:10px 0;padding:20px 10px;background:#FFFFFF;}
.resMore{margin:10px 30px 30px 30px; border:1px solid #eaeaea; min-height: 640px;}
.resouRight{ width: 20%;}
.rightBlock{ min-height: 352px;padding:16px 10px;margin-bottom:10px; background: #FFFFFF;}
.proImg{ text-align: center;}
.proImg img{ width:180px;}
.proInfo{padding:10px 16px;}
.otherRes{padding:10px;}
.otherRes li{border: 1px solid #e4e5e7;margin:10px 0;border-radius: 6px;cursor: pointer;}
.otherRes li a{display: block;}
.otherRes li .resoumag .resourceImgBox{ max-width:168px;width:168px;height: 168px;margin:0;}
.otherRes li .resoumag h2{color: #666666; text-align: center; padding:10px;}

js/information.brow.js

					for(var i=0;i<data.data.length;i++){
						add='<div class="sharesrc">'
						add+='<div class="shareshow">'
	                	add+='<a class="remess" resourceId='+data.data[i].resourceId+'><img src="/images/resource/'+data.data[i].resourceId+'.jpg" width="100%" height="100%" class="resourceImg"></a>'
	                	add+='<a class="remess" resourceId='+data.data[i].resourceId+'>'
	                	add+='<div class="ResImgBox" style="max-width:200px;width:200px;height: 200px;margin:0;">'
						add+='<img class="resImg headRadius resourceImg" src="/images/resource/'+data.data[i].resourceId+'.jpg" />'
						add+='</div></a>'
	                 	add+='<div class="shareopeart"><a class="sharebtn resourceConsult" professorId='+data.data[i]["professorId"]+'>咨询</a><a class="sharebtn applicant" style="display:none">申请</a></div>'
	             		add+='</div>'
	             		add+='<p class="restit">资源名称：<span class="presou consultTitleVal" resourceConsultTitle = "">'+ data.data[i].resourceName+'</span></p>'

js/information.js

					for(var i=0;i<data.data.length;i++){
						add='<div class="sharesrc">'
						add+='<div class="shareshow">'
	                	add+='<a><img src="/images/resource/'+data.data[i].resourceId+'.jpg" width="100%" height="100%" class="resouImage"></a>'
	                	add+='<a><div class="ResImgBox" style="max-width:200px;width:200px;height: 200px;margin:0;">'
						add+='<img class="resImg headRadius resourceImg" src="/images/resource/'+data.data[i].resourceId+'.jpg" /></div></a>'
	                 	add+='<div class="shareopeart"></div>'
	             		add+='</div>'	             
	             		add+='<p class="restit">资源名称：<span class="presou">'+ data.data[i].resourceName+'</span></p>'

js/newsciresource.js

							add+='<th width="12%">联系人</th><th width="14%">交付时间</th>'        
							add+='<th width="20%">付款进程</th><th width="12%">状态/操作</th></tr></table><div class="tcdPageCode tcdPageCod'+i+'"></div></div>';*/
						    var add='<div class="addworkbtn-list"> <div class="resoumag">'
						    	add+='<h3><img src="" class="resourceImg"></h3>'               
						    	add+='<div class="ResImgBox" style="max-width:226px;width:226px;height: 226px;margin:0;"><img class="resImg headRadius resourceImg" src="" /></div>'               
								add+='<h2>'+data.data[i].resourceName+'</h2>' 
								add+='<p>'+data.data[i].supportedServices+'</p>' 
								add+='</div></div>'; 	

js/popup.js

	PopHtml +='<div class="resouimgbox floatL" style="width:240px;">';
	PopHtml += '<div class="resouinforcon">';
	PopHtml += '<div class="resouimg" >';
	PopHtml += '<div class="resouimgshow" style="height:220px;width:220px;"><img width="100%" height="100%" src="" class="resouImage" /></div></div>';
	PopHtml += '<div class="resouimgshow" style="height:220px;width:220px;"><div class="ResImgBox" style="max-width:220px;width:220px;height: 220px;margin:0;"><img class="resImg headRadius resouImage" src="" /></div></div></div>';
	PopHtml += '</div></div>';
	PopHtml += '</div></form>';
	//关闭按钮
		PopHtml += '<tr><th class="resouinfotype " scope="row">交付时间</th><td><div class="resouinforcon"><input type="text" readOnly="true" id="datepicker"class="frmtype dealTime"style="width:200px;"></div></td></tr>';
		PopHtml += '<tr class="limitBox"><th class="resouinfotype"  scope="row">具体需求</th><td class="limitwordbox"><div class="resouinforcon limitwords"><textarea class="frmtype detail"></textarea></div></td></tr></table>';
		
		PopHtml += '<div class="resouimgbox floatL"><div class="resouinforcon"><div class="resouimg2" ><img src="" width="100%" height="100%"  class="resouImage"></div></div></div></div>';
		PopHtml += '<div class="resouimgbox floatL"><div class="resouinforcon"><div class="resouimg2" ><div class="ResImgBox" style="max-width:220px;width:220px;height: 220px;margin:0;"><img class="resImg headRadius resouImage" src="" /></div></div></div></div></div>';
		
		//相关文件上传
		PopHtml += '<div class="filebox"style="display:none;"> ';
		PopHtml += '<tr class="limitBox"><th class="resouinfotype" scope="row">备注</th><td class="limitwordbox"><div class="resouinforcon limitwords"id="consultContent"></div></td></tr></table>';
		PopHtml += '</table>';
		
		PopHtml += '<div class="resouimgbox1 floatL"><div class="resouinforcon"><div class="resoushowimg1" ><img src="" width="100%" height="100%"  class="resouImage"></div></div></div></div>';
		PopHtml += '<div class="resouimgbox1 floatL"><div class="resouinforcon"><div class="resoushowimg1" ><div class="ResImgBox" style="max-width:220px;width:220px;height: 220px;margin:0;"><img class="resImg headRadius resouImage" src="" /></div></div></div></div></div>';
		//文件	
		PopHtml += '<div class="filebox"> ';
		PopHtml += '<div class="worktit">相关文件<div class="uploadbtn">上传文件</div></div>';

js/search.js

						var $da = data.data.data;
						for(var i = 0; i < $da.length; i++) {
							var add = '<div class="item"><div class="remess" resourceId=' + $da[i].resourceId + '>'
							add += '<a class="resourcephoto headRadius" ><img src="" class="resourceImg" width="100%" height="100%" ></a>'
							add += '<a class="resourcephoto headRadius" ><div class="ResImgBox" style="margin:0;background:#ffffff;"><img class="resImg headRadius resourceImg" src="" /></div></a>'
							add += '<div class="synopsis" style="width:66%;">'
							add += '<div class="cousultName"><a class="resouname" href="javascript:void();">' + $da[i].resourceName + '</a></div>'
							if($da[i].professor.name) {

js/workindex.js

					for(var i=0;i<data.data.length;i++)
						{
						    var add='<div class="addworkbtn-list"> <div class="resoumag">'
						    	add+='<h3><img src="" class="resourceImg"></h3>'               
						    	add+='<div class="ResImgBox" style="max-width:200px;width:200px;height: 200px;margin:0;"><img class="resImg headRadius resourceImg" src="" /></div>'               
								add+='<h2>'+data.data[i].resourceName+'</h2>' 
								add+='<p>'+data.data[i].supportedServices+'</p>' 
								add+='</div></div>';