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

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