您当前的位置：&&&&&正文
基于JQuery实现的图片自动进行缩放和裁剪处理
其实很早就想写一个这样的效果，至于原因？进来这个笔记，我相信你懂的。一般门户网站，缺少不了大量的图片展示，而为了网站美观，图片又有各种不同尺寸，专业的网站编辑人员，会把图片处理成等比例的图片再上传，把网站弄得很好看，可惜，我想说，我遇到90%的网站编辑人员都是不专业的。为了不让网站编辑人员毁掉我的心血，我决定做这样一个事情。
1、首先，在CSS里对图片定义好大小，如果JS不执行，就能看到拉伸的图片，也就是最正常的表现；2、对每个定义图片大小的CSS多定义一个不常用的容器，这里我选用了斜体标签&cite&&/cite&，并定义其CSS与同根img的CSS一模一样，并定义该容器里的img的CSS样式回归margin:0;padding:0;我是这样做的：
/*公用*/cite{display:overflow:overflow:hidden !}/*某容器*/#BigPic img{display:padding:2width:240height:160border:1px solid #}#BigPic cite{display:padding:2width:240height:160border:1px solid #}#BigPic cite img{display:margin:0padding:0border:}
3、定义图片处理函数，参考图片被定义的大小和原始大小，在保持比例的前提下填充满位置，再装进裁剪容器；我的代码：
//图片尺寸判断与处理，用裁剪容器包围 - By COoLfunction cutImgz(obj){&&&&var image=new Image();&&&&image.src=obj.&&&&$this=$(obj);&&&&var iwidth=$this.width();//获取在CSS里固定的图片显示宽度&&&&var iheight=$this.height();//获取在CSS里固定的图片显示高度&&&&if(1*image.width*iheight!=1*iwidth*image.height){&&&&&&&&//原始图片的尺寸与CSS里固定的图片尺寸比例不一致，则进行处理&&&&&&&&if(image.width/image.height&=iwidth/iheight){&&&&&&&&&&&&$this.height(iheight+'px');&&&&&&&&&&&&$this.width((image.width*iheight)/image.height+'px');&&&&&&&&}&&&&&&&&else{&&&&&&&&&&&&$this.width(iwidth+'px');&&&&&&&&&&&&$this.height((image.height*iwidth)/image.width+'px');&&&&&&&&}&&&&&&&&//用cite装起来，做出裁剪效果&&&&&&&&$this.wrap('&cite /&');&&&&}}
4、在加载页面时遍历所有图片，判断其是否在缓存中，在缓存中则直接进行处理，不在缓存中则通过onload触发处理；（因为在缓存的图片秒load，在定义onload事件之前就已经load好，导致onload事件不被触发；而不在缓存的图片，若直接处理，图片未load出来，原始尺寸会被Image对象认为是空图，width和height都是0）我的代码：
$('img').each(function(){&&&&var image=new Image();&&&&image.src=this.&&&&plete){&&&&&&&&//存在缓存中，立即处理&&&&&&&&cutImgz(this);&&&&} else{&&&&&&&&//不存在缓存中，onload处理&&&&&&&&this.onload=function(){&&&&&&&&&&&&cutImgz(this);&&&&&&&&}&&&&}});--博才网
猜你还喜欢的文章
热点文章排行榜
读完这篇文章后，您心情如何？
您还有150字可以输入
更多资讯请点击
热门关键字：，，，
【打印文章】
真野惠里菜性感睡衣诱惑
美国火辣女郎让军营沸腾
浙江农大女生集体穿热裤露脐装做广播操
嫩模团穿性感短裙在广场扮女警跳手枪舞
狂野非洲另一面：风沙中穿行的狮子
[欧联杯]国米2-0卡拉巴赫高清图集
• 版权所有 Copyright 2011 All rights reserved.js+css 如何实现图片不变形的裁剪、缩放
[问题点数：50分，无满意结帖，结帖人xiaoxujava]
js+css 如何实现图片不变形的裁剪、缩放
[问题点数：50分，无满意结帖，结帖人xiaoxujava]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
2008年2月 总版技术专家分月排行榜第一2008年1月 总版技术专家分月排行榜第一
2008年7月 总版技术专家分月排行榜第三2008年6月 总版技术专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。&div id=article&&img height=&800& alt=&& width=&1280& src=&/down/js/images/.jpg& /&&/div&
&script type=&text/javascript& &
//缩放图片到合适大小
function ResizeImages()
&& var myimg,oldwidth,
&& var maxwidth=550;
&& var maxheight=880
&& var imgs = document.getElementById('article').getElementsByTagName('img');&& //如果你定义的id不是article，请修改此处
&& for(i=0;i&imgs.i++){&&&& myimg = imgs[i];
&&&& if(myimg.width & myimg.height)&&&& {&&&&&&&& if(myimg.width & maxwidth)&&&&&&&& {&&&&&&&&&&& oldwidth = myimg.&&&&&&&&&&& myimg.height = myimg.height * (maxwidth/oldwidth);&&&&&&&&&&& myimg.width =&&&&&&&& }&&&& }else{&&&&&&&& if(myimg.height & maxheight)&&&&&&&& {&&&&&&&&&&& oldheight = myimg.&&&&&&&&&&& myimg.width = myimg.width * (maxheight/oldheight);&&&&&&&&&&& myimg.height =&&&&&&&& }&&&& }&& }}//缩放图片到合适大小ResizeImages();&/script&
意思就是控制指定区域的的图片大小，要不一些大点的广告图片也会变形。
脚本之家用的图片控制代码：
function controlImg(ele,w,h){
& var c=ele.getElementsByTagName(&img&);
& for(var i=0;i&c.i++){
&&& var w0=c[i].clientWidth,h0=c[i].clientH
&&& var t1=w0/w,t2=h0/h;
&&& if(t1&1||t2&1||w0&=600){
&&&& c[i].width=Math.floor(w0/(t1&t2?t1:t2));
&&&& c[i].height=Math.floor(h0/(t1&t2?t1:t2));
if(document.all){
&&&&&&&&& c[i].outerHTML='&a href=&'+c[i].src+'& target=&_blank& title=&在新窗口查看图片&&'+c[i].outerHTML+'&/a&'
&&&&&& else{
&&&&&&&&& c[i].title=&在新窗口打开图片&;
&&&&&&&&& c[i].onclick=function(e){window.open(this.src)}
&&&&&&&&&& }
&&&&&&&&&& }
ele就是指定的区域，w是最大的宽度，大于这个就会缩小。h是最大的高度。
JS代码(随便放哪里): &scriptlanguage=&JavaScript&& &!-- varflag= functionDrawImage(ImgD){ varimage=newImage(); image.src=ht
jQuery(document).ready(function() { /* 图片不完全按比例自动缩小*/ $(window).load(function(){$('#content div.thumbnail img').each(function(){varx=200; //填入目标图片宽度 &
本文实例主要展示了.Net实现上传图片按比例自动缩小或放大的方法，是非常实用的功能。分享给大家供大家参考之用。具体方法如下：
//// &summary& /// 按比例缩小图片，自动计算宽度 /// &/summary& /// &param name=&strOldPic&&源图文件名(包括路径)&/param& ///
为了防止图片撑破布局，最常见的仍然是通过onload后获取图片尺寸再进行调整，所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进，onload完毕后才显示原图。我以前用onload写过一个小例子：/?p=1022
通过imgReady可以跨浏览器在dom ready就可以实现图片自适应，无需等待img加载，代码如下： （3-17修复网友cr
举例来说 第一种情况：如图片大小为 600&350，显示区域大小为 200&140，如果图片根据目标宽度（200）按比例缩放后大小变成 116，那么显示在 200&140 就会很难看。如下图左 第二种情况：刚好相反，如图片大小为400&400，显示区域同样是200&140，如果图片根据目标高度（140）按比例缩放后大小变成 140，即 1
瞄了一下，居中可以用 text-align: 来实现。而按比例缩放，利用预设 &img /& 的 width 、height 属性解决不了。因为用户图片可能是很长的，也可能是很宽的。在线上想了一下他们的关系，按条件来判断是这样的：
if(实际宽度 & 预览最大宽度) { 缩放宽度 = 预览最大宽度 }
if(实际高度 & 预
缩放代码：
缩放代码： &script type=&text/javascript&& //图片按比例缩放 var flag = function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src =
为了提升用户体验，网站用户在上传图片的时候，我们不能够让用户自己去处理图片以达到我们的要求。 而通常像淘宝上商品实物展示这样的页面，我们需要控制的主要是图片的宽度。 又考虑到html页面解析顺序可能导致的一些问题，决定通过定义一个简单的功能函数，然后在img元素中添加onload事件来调用的方式进行实现，代码如下： JS部分
&script type=&tex
最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下 原来我用的是从pjblog上的
//查找网页内宽度太大的图片进行缩放以及PNG纠正 functionReImgSize(){ for(i=0;i&document.i
&script type=&text/javascript& src=&js/jquery.min.js&&&/script& &script type=&text/javascript&& jQuery.fn.LoadImage=function(scaling,width,heigh
用户上传照片，照片的尺寸未知；需要生成一个预览，这个预览图要根据提供给用户预览的区域自应用，并且居中；如果图片太大，需要按比例缩放。如下图。
瞄了一下，居中可以用 text-align: 来实现。而按比例缩放，利用预设 &img /& 的 width 、height 属性解决不了。因为用户图片可能是很长的，也可能是很宽的。在线上想了一下他们的关系，按条件来判断是这样的：
在动态站点上经常需要上传自己的图片，而这些图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站（）做例子。
该网站需要上传高尔夫产品图片，并以缩略图显示在列表上，站点服务器支持Asp，但不支持aspjpeg之类的生成缩略图组件，所以将上传的图片直接显示成缩略图，就需要按比例缩放了，前提是要
在布局页面时，有时会遇到大图片将页面容器“撑破”的情况，尤其是加载外链图片（通常是通过采集的外站的图片）。那么本文将为您讲述使用jQuery如何按比例缩放大图片，让大图片自适应页面布局。
通常我们处理缩略图是使用后台代码（PHP、.net、Java等）根据大图片生成一定尺寸的缩略图，来供前台页面调用，当然也有使用前台javascript脚本将加载后的大图强行缩放，变成所谓的缩略图，这种方法不可取
如果不支持网页对话框就再新窗口打开 目的：图片自动缩小点击放大 输入：无 返回：无
function$(obj){ returndocument.getElementById(obj); } function&nbsp
本文实例讲述了js防止页面被iframe调用的方法。分享给大家供大家参考。具体实现方法如下： 一、问题描述： 有时候我们发会现自己的网站页面被别人调用并且一模一样，这个其实就是简单的iframe调用了，下面我来给大家介绍js防止页面iframe调用的方法总结吧，有需要的朋友可参考 二、解决方法： 防止自己的网页被人框架： top.location.href 最上层的地址 windows.locat
/************************************自动适应的图片弹窗*********************************/ var autoImg=function(argcs){/*调整图片大小，等比例缩放argcs['maxHeight']=&最大高度,argcs['maxWidth']=&最大宽度,argcs['height'
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，脚本之家以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。
&html&&head&&title&等比例缩放图片&/title&&script
这个功能主要是解决内容页中的图片过大撑出，导致页面比较难看，就需要这样的代码，需要的朋友可以参考下
需求：图片width&=600px,height&=800。
1、利用max-width,max-height使图片等比例自动缩放 代码：
img{max-width: 600max-height: 800}
由于ie6不支持css max
在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。 Javascript：
& script language=&javascript& type=&text/javascript&& & !-
如何用Javascript判断图片大小，其实只要写一个简单的函数就可以了，当然这么判断要怎么写很多人可能不知道。发觉用 ASP 判断图片大小比数牛毛还繁复， 且判断了就判断了， 还要逻辑显示。..烦。 用 Javascript 判断， 轻松搞定， 最终效果无非就是不要让大图片撑破页面。
&script LANGUAGE=“JAVASCRIPT”& //检查图片大小是否大于预期大小，
/// &summary&
/// 压缩图片
/// &/summary&
/// &retur
function resizeimage($srcfile,$mySize){
$size=getimagesize($srcfile);
switch($size[2]){
/* **************图片预加载插件****************** ///作者：没剑() ///
///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载，而图片后加载的方式， 解决了平时使用时要在图片显示出来后才能进行
为了防止图片撑破布局，最常见的仍然是通过onload后获取图片尺寸再进行调整，所以加载过程中仍然会撑破。而Qzone日志的图片在此进行了改进，onload完毕后才显示原图。我以前用onload写过一个小例子：/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应，无需等待img加载，代码如下：
今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：
$(function(){ $(&.body img&).each(function(){ if($.browser.msie){ $(
html代码结构:
&a href=&&&&img src=&images/tmp_376x470.jpg& width=&300& height=&300& alt=&&/&&/a& &a href=&&&&
js部分是这样的:
//**********************图片上传预览插件************************ //作者：IDDQD() //Email： //.cn/iddqd //版本：1.0
//说明：图片上传预览插件 //上传的时候可以生成固定宽高范围
实现原理 把所有需要延时加载的图片改成如下的格式：
&img lazy_src=&图片路径& border=&0&/&
然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用laz
这是一个基于jquery的图片效果，它的作用是：当图片点击变大(变小)时，其它图片按照一定的规则进行排序运动。
首先来看下最终的效果图：
有人可能看到这个会觉得，这有什么难的，这么简单的事，楼主是不是太小提大作了？当你真正去尝试时，你才知道到底有什么难点。
首先，我们来讲下需求： 1.图片分为大小和小图，大图占四个小图的位置， 2.点击图片放大缩小， 重新排列顺序, 3. 当
var scaleImage = function(o, w, h){ var img = new Image(); img.src = o. if(img.width &0 && img.height&0) { if(img.width/img.height &= w/h) { if(img.width & w) { o.width
需求：图片width&=330px,height&=150。 1、利用max-width,max-height使图片等比例自动缩放，代码：
img{max-width: 330max-height: 150}
由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。 2、用java
这段时间比较闲，就搞了这么一个功能来练练手。 因为没有系统的学习过javascript，很多东西都是现学现用。请大家多提宝贵意见，谢谢
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
最近项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件 用法：
$(&div#printmain&).printArea();
但还是会打印DIV后面的内容，这里可以使用CSS控制打印分页
&div style=&page-break-after:&&&/div&gt
&SCRIPT language=&JavaScript&& function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.
function DrawImage(ImgD, FitWidth, FitHeight) {
var image = new Image();
image.src = ImgD.
if (image.width & 0 && image.
关于 这个和以前弄的图片远处放大有许多相同的地方，比如图片预加载、有限容器显示无限大图片。
大小计算：内外两个比例。
// 容器比例和图片比例 var dr = dw/dh, ir = iw/ if(dr&ir){ ih = iw = ih * }else{ iw = ih = iw / }
居中显示：CSS绝对定位，负边距。
做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况，下面就这个问题我们一种如何使用js处理这个问题的方法，具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理，js处理图片主要是利用js中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。
（1）第一中方法，通过onload事件，比如：
提供一个背景图片策略：
1，背景图片固定
2，随窗口大小改变而改变大小
3，保持比例不变而缩放
支持浏览器:IE 6,7,8,9+ ,FF,Chrome
演示地址：http://www.einino.net/bg_image.html
&style& body{margin:0; padding:0;height:2000 } #backgroun
看JS源码：
// 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: &&, // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录
init: function(){
防止网站内容被小偷采集的ASP代码 看了一下asp的，因为我的站是静态的所以就凑手写了个静态的javascript版的。 具体就不详细说明了： 欢迎讨论，原创转载请说明
&scriptlanguage=&JavaScript&& functionsetCookie(name,value,expir图片编辑器
工具导航地图几款js图片等比例缩放效果代码-js教程-网页制作-壹聚教程网几款js图片等比例缩放效果代码本文章收藏了四款js图片等比例缩放效果代码哦，在很多开发应用中我们都会要用到图片按比例缩小哦，现在用的方法比较多可以利用js缩放也可以用php,asp，css等来做。
&!doctype html public &-//w3c//dtd xhtml 1.0 transitional//en& &http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd&&
&html xmlns=&http://www.111cn.net/ 1999/xhtml&&
&meta http-equiv=&content-type& content=&text/ charset=gb2312& /&
&title&几款js图片等比例缩放效果代码&/title&
function wa_setimgautosize(img)
//var img=document.all.img1;//获取图片
var maxwidth=200;//设置图片宽度界限
var maxheight=100;//设置图片高度界限
var heightwidth=img.offsetheight/img.//设置高宽比
var widthheight=img.offsetwidth/img.//设置宽高比
alert(&test&+img.offsetheight+img.filesize);
if(img.offsetheight&1) alert(img.offsetheight);
if(img.readystate!=&complete&){
&//确保图片完全加载
if(img.offsetwidth&maxwidth){
img.width=
img.height=maxwidth*
if(img.offsetheight&maxheight){
img.height=
img.width=maxheight*
下面看一寺完整的js 图片大小等比例缩放实例
&!doctype html public &-//w3c//dtd xhtml 1.0 transitional//en& &&&
&html xmlns=&&&
&meta http-equiv=&content-type& content=&text/ charset=gb2312& /&
&title&图片自动等比例缩小且垂直居中&/title&
&style type=&text/css&&
padding:0;
.imgbox li {
list-style:
width:200& /* 宽度 */
height:200 /* 高度 */
background:#
border:1px solid #666;
text-align:
line-height:200
.imgbox img {
max-width:200& /* 宽度 */
max-height:200 /* 高度 */
vertical-align:
&!--[if lte ie 6]&
&script type=&text/& language=&javascript&&
function imgfix() {
& //定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作
& var widthrestriction = 200;
& var heightrestriction = 200;
& var allelements = document.getelementsbytagname('*')&&
& for (var i = 0; i & allelements. i++)
&&& if (allelements[i].classname.indexof('imgbox') &= 0)
&&&&& var imgelements = allelements[i].getelementsbytagname('img');
&&&&& for (var j=0; j & imgelements. j++)
&&&&&&&&& {
&&&&&&& if ( imgelements[j].width & widthrestriction || imgelements[j].height & heightrestriction )
&&&&&&&&&&&&&&& {
&&&&&&&&& if ( imgelements[j].width & imgelements[j].height)
&&&&&&&&&&&&&&&&& {
&&&&&&&&&&& imgelements[j].height = imgelements[j].height*(widthrestriction/imgelements[j].width);
&&&&&&&&&&& imgelements[j].width =
&&&&&&&&& } else
&&&&&&&&&&&&&&&&& {
&&&&&&&&&&& imgelements[j].width = imgelements[j].width*(heightrestriction/imgelements[j].height);
&&&&&&&&&&& imgelements[j].height =
&&&&&&&&& }
&&&&&&&&&&&&&&& if ( imgelements[j].height & heightrestriction )
&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&& imgelements[j].style.paddingtop = ( heightrestriction -imgelements[j].height ) /2 + &px&;
&&&&&&&&&&&&&&& }
&&&&& } /*for j*/
& }/*for i*/
window.onload =
&![endif]--&
&ul class=&imgbox&&
& &li&&img src=&......& alt=&img& /&&/li&
& &li&&img src=&......& alt=&img& /&&/li&
& &li&&img src=&......& alt=&img& /&&/li&
& &li&&img src=&......& alt=&img& /&&/li&
&title&缩放图片尺寸&/title&
&script language=&javascript&&
var zoomlevel = 0;
var currentwidth = 0;
var currentheight = 0;
var originalwidth = 0;
var originalheight = 0;
function initial(){
&&& currentwidth = document.myimage.
&&& currentheight = document.myimage.
&&& originalwidth =
&&& originalheight =
&&& update();
function zoomin(){
&&& document.myimage.width = currentwidth*2;
&&& document.myimage.height = currentheight*2;
&&& zoomlevel = zoomlevel + 1;
&&& update();
function zoomout(){
&&& document.myimage.width = currentwidth/2;
&&& document.myimage.height = currentheight/2;
&&& zoomlevel = zoomlevel - 1;
&&& update();
function resetimage(){
&&& document.myimage.width =
&&& document.myimage.height =
&&& zoomlevel = 0;
&&& update();
function update(){
&&& currentwidth = document.myimage.
&&& currentheight = document.myimage.
&&& zoomsize.innertext =
&&& imgsize.innertext = currentwidth + &x& +
&body onload=&initial()&&
&h2&缩放图片尺寸&/h2&
&div align=&left& style=&font:10overflow-y:
&& overflow-x:height=350;width=600&&
&img name=&myimage& src=&/banner/logo.gif&&
&input type=&button& value=&放大图片& onclick=&zoomin()&&
&input type=&button& value=&缩小图片& onclick=&zoomout()&&
&input type=&button& value=&重置图片& onclick=&resetimage()&&
(&span id=&zoomsize&&&/span&) - &span id=&imgsize&&&/span&
&script type=&text/javascript&&
图片等比例缩小:
function drawimage(imgd){
var image=new image();
var iwidth = 450;
var iheight = 400; //定义允许高度，当宽度大于这个值时等比例缩小
image.src=imgd.
if(image.width&0 && image.height&0){
if(image.width/image.height&= iwidth/iheight){
&& if(image.width&iwidth){
&&& imgd.width=
&&& imgd.height=(image.height*iwidth)/image.
&&& imgd.width=image.
&&& imgd.height=image.
&& if(image.height&iheight){
&&& imgd.height=
&&& imgd.width=(image.width*iheight)/image.
&&& imgd.width=image.
&&& imgd.height=image.
//调用：&img src=&图片& onload=&javascript:drawimage(this)&&
上一页： &&&&&下一页：相关内容}