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

编程问答

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

发布时间：2025/3/19 编程问答 37 豆豆

生活随笔收集整理的这篇文章主要介绍了上传图片时，图片大小不一，设置宽高，图片拉伸，如何处理呢，我来告诉你... 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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邮件