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

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

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

5分钟学会js上传图片校验图片格式、大小、尺寸宽高
js上传图片校验图片格式.大小.尺寸宽高一.前言 js上传图片校验图片格式.大小.尺寸宽高. 在此记录下,分享给大家. 二.代码 <input type=" ...
gridcontrol值为0时设置为空_CSS设置宽高的小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
html 图片保持长宽比,实现图片在页面中宽高一直保持16：9比例的方法
实现图片在页面中宽高一直保持16:9比例的方法发布时间:2020-08-31 14:25:10 来源:亿速云阅读:133 作者:小新小编给大家分享一下实现图片在页面中宽高一直保持16:9比例的方 ...
[css] img标签是行内元素，为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）
我们习惯将html中元素分类为行内元素和块级元素,如下: ·常见块级元素有:html.body.div.header.footer.nav.section.aside.article.p.hr.h1~ ...
关于span设置宽高
首先区别内联元素和块元素内联元素不会独自占据一行,其他的内联元素也可以在同一行:块元素独自占据一行. 块级元素可设置宽高,内联元素设置无效. 块级元素的 width 默认为 100%,而内联元素则是 ...
Java BufferImage图片处理（获取宽高、图片截取、转换灰度图）
Java BufferImage图片处理(获取宽高.截取.转换灰度图) 1. 效果图 2. 源码参考这篇博客将介绍如何使用Java读取图片为byte[]数组,或者BufferedImage及互相转 ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...

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

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

最新文章

热门文章