當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

上传图片时，图片大小不一，设置宽高，图片拉伸，如何处理呢，我来告诉你...

發布時間：2025/3/19 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了上传图片时，图片大小不一，设置宽高，图片拉伸，如何处理呢，我来告诉你... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

對于上傳圖片的煩惱，今天給你個例子，很實用的哦

這個是原來大小不一的圖片

經過處理后

代碼如下index.html

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <meta?name="keywords"?content="JS代碼,{keyword},JS廣告代碼,JS特效代碼"?/> <meta?name="description"?content="此代碼內容為ab藍學網，屬于站長常用代碼，ab藍學網。"?/> <title>ab藍學網</title> <link?rel="stylesheet"?href="css/style.css"?type="text/css"?/> <script?type="text/javascript"?src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script?type="text/javascript"?src="js/jquery.VMiddleImg.js"></script> </head><body> <div?id="main"><h1>【jQuery插件】VMiddleImg圖片居中裁切效果的實例頁面</h1><div?id="body"?class="light"><div?id="content"?class="show"><div?class="demo"><div?class="img-box?clearfix"><h3>原始圖</h3><ul><li><a?href="#"><img?src="img/001.jpg"?width="300"?height="372"></a></li><li><a?href="#"><img?src="img/002.jpg"?width="85"?height="85"></a></li><li><a?href="#"><img?src="img/003.jpg"?width="452"?height="531"></a></li><li><a?href="#"><img?src="img/004.jpg"?width="428"?height="319"></a></li></ul></div><div?class="img-box?themes1?clearfix"?style="margin-top:20px;">?<h3>200*200PX寬高圖</h3><ul><li><a?href="#"><img?src="img/001.jpg"?width="300"?height="372"?class="t-img"></a></li><li><a?href="#"><img?src="img/002.jpg"?width="85"?height="85"?class="t-img"></a></li><li><a?href="#"><img?src="img/003.jpg"?width="452"?height="531"?class="t-img"></a></li><li><a?href="#"><img?src="img/004.jpg"?width="428"?height="319"?class="t-img"></a></li></ul></div><div?class="img-box?themes2?clearfix"?style="margin-top:20px;">??<h3>100*100PX寬高圖</h3><ul><li><a?href="#"><img?src="img/001.jpg"?width="300"?height="372"?class="t-img"></a></li><li><a?href="#"><img?src="img/002.jpg"?width="85"?height="85"?class="t-img"></a></li><li><a?href="#"><img?src="img/003.jpg"?width="452"?height="531"?class="t-img"></a></li><li><a?href="#"><img?src="img/004.jpg"?width="428"?height="319"?class="t-img"></a></li></ul></div><div?class="img-box?themes3?clearfix"?style="margin-top:20px;">?<h3>120*90PX寬高圖</h3><ul><li><a?href="#"><img?src="img/001.jpg"?width="300"?height="372"?class="t-img"></a></li><li><a?href="#"><img?src="img/002.jpg"?width="85"?height="85"?class="t-img"></a></li><li><a?href="#"><img?src="img/003.jpg"?width="452"?height="531"?class="t-img"></a></li><li><a?href="#"><img?src="img/004.jpg"?width="428"?height="319"?class="t-img"></a></li></ul></div></div></div></div> </div> <script?type="text/javascript">$(".themes1?.t-img").VMiddleImg();$(".themes2?.t-img").VMiddleImg({"width":110,"height":110});$(".themes3?.t-img").VMiddleImg(); </script> <div?id="footer">? <p>來源：<a?href="http://www.wmtimes.cn/"?target="_blank">完美時光</a>　代碼整理：<a?href="http://www.ablanxue.com/"?target="_blank">ab藍學網</a></p> <p>＊尊重他人勞動成果，轉載請自覺注明出處！注：此代碼僅供學習交流，請勿用于商業用途。</p> <p>{download}</p> <p>{content}</p> <p>{google_729x90}</p> </div> </body> </html>

里面所需js文件 jquery.VMiddleImg.js

/* *?@author?愚人碼頭 *?【jQuery插件】圖片垂直水平縮放顯示 *?更多 */ (function($){$.fn.VMiddleImg?=?function(options)?{var?defaults={"width":null,"height":null};var?opts?=?$.extend({},defaults,options);return?$(this).each(function()?{var?$this?=?$(this);var?objHeight?=?$this.height();?//圖片高度var?objWidth?=?$this.width();?//圖片寬度var?parentHeight?=?opts.height||$this.parent().height();?//圖片父容器高度var?parentWidth?=?opts.width||$this.parent().width();?//圖片父容器寬度var?ratio?=?objHeight?/?objWidth;if?(objHeight?>?parentHeight?&&?objWidth?>?parentWidth)?{if?(objHeight?>?objWidth)?{?//賦值寬高$this.width(parentWidth);$this.height(parentWidth?*?ratio);}?else?{$this.height(parentHeight);$this.width(parentHeight?/?ratio);}objHeight?=?$this.height();?//重新獲取寬高objWidth?=?$this.width();if?(objHeight?>?objWidth)?{$this.css("top",?(parentHeight?-?objHeight)?/?2);//定義top屬性}?else?{//定義left屬性$this.css("left",?(parentWidth?-?objWidth)?/?2);}}else?{if?(objWidth?>?parentWidth)?{$this.css("left",?(parentWidth?-?objWidth)?/?2);}$this.css("top",?(parentHeight?-?objHeight)?/?2);}});}; })(jQuery);

樣式文件：style.css

@charset?"utf-8"; html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;} body,button,input,select,textarea{font:12px/1.5?tahoma,arial,\5b8b\4f53;} body{line-height:1;background:#FFFFFF;} section,article,aside,header,footer,nav,dialog,figure{display:block;} figure{margin:0;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier?new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} /*?Hides?from?IE-mac?\*/ *?html?.clearfix{height:1%;} .clearfix{display:block;} /*?End?hide?from?IE-mac?*/#main{width:100%;?background:#beceeb;?overflow:hidden;} #main?h1{line-height:40px;?margin:0;?text-align:center;?font-size:1.3em;?background:#C10000;?color:#FFFFFF;?font-family:'微軟雅黑','宋體';?text-shadow:0px?1px?0px?#D10000;}/*custom?css*/ .img-box{background:#EFEFEF;?padding:20px;} .img-box?li{float:left;?margin-right:10px;?padding:5px;?background:#fff;?overflow:hidden;} .img-box?li?a{float:left;?overflow:hidden;?text-align:center;?position:relative;} .img-box?li?a?img{position:relative;?vertical-align:text-top;} /*themes*/ .themes1?li{width:200px;?height:200px;}/*容器寬高*/ .themes1?li?a{width:200px;?height:200px;}/*容器寬高*/ .themes2?li{width:100px;?height:100px;} .themes2?li?a{width:100px;?height:100px;} .themes2?li?a?img{?margin-top:?-5px;?margin-left:?-5px} .themes3?li{width:120px;?height:90px;} .themes3?li?a{width:120px;?height:90px;}#content{min-height:500px;?_height:500px;?max-width:1680px;?margin:0?auto;?background:white;?border:solid?#cad5eb;?border-width:0?2px;?font-family:'Lucida?Grande',Verdana;} .show{padding-bottom:20px;} .show?h5{font-size:0.9em;?line-height:20px;?padding-left:2px;?margin:10px?8px?0;?} .show?.demo{padding:10px;?*zoom:1;} .show?.demo:after{display:block;?content:"clear";?height:0;?visibility:hidden;?overflow:hidden;?clear:both;} .show?.demo?h3{height:40px;font:bold?24px/40px?tahoma,arial,\5b8b\4f53;} #footer{line-height:1.3;?padding:15px?0;?border-top:1px?solid?#486aaa;?font-family:'Lucida?Grande',Verdana,?Sans-Serif;?color:#efefef;?text-align:center;??background-color:#555555;?text-shadow:1px?1px?#333333;} #footer:before{display:block;?height:1px;?content:'.';?background-color:#909BAF;?overflow:hidden;?position:relative;?top:-15px;} #footer?img{margin-bottom:-3px;} #footer?a:link,#footer?a:visited{color:#efefef;text-decoration:none;} #footer?a:hover{color:#efefef;text-decoration:underline;}

其余圖片自己可以自行添加，不要嫌麻煩啊

轉載于:https://my.oschina.net/meng527/blog/178344

總結

以上是生活随笔為你收集整理的上传图片时，图片大小不一，设置宽高，图片拉伸，如何处理呢，我来告诉你...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Yii 框架里数据库操作详解-[增加、查
下一篇：如何将外部邮箱添加至Exchange邮件