No1.例:指定test容器中的所有图片的大小长宽均不超过180
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> *{ margin:0; padding:0} .p1,.p2,.p3{width:180px;height:180px;border:2px solid #393;background:#f00;display:inline-block;margin:20px 0 0 20px;text-align:center;vertical-align:middle} </style> <div id="test"> <p class="p1"><img src="test1.jpg"/></p> <p class="p2"><img src="test2.jpg"/></p> <p class="p3"><img src="test3.jpg"/></p> </div> <script type="text/javascript"> //selector是所有的图片对象 //maxW和maxH分别为指定的最大宽度和最大高度 //"实际宽度和高度"是指源文件的实际宽度和高度 //"显示宽度和高度"是指自适应处理后的宽度和高度,即最终效果 function resizeimg(selector, maxW, maxH) { var im = new Image(); im.src = $(selector).attr('src'); $(im).load(function () { var imgW = im.width;//实际宽度赋值给imgW var imgH = im.height;//实际高度赋值给imgH if (imgW > maxW || imgH > maxH) {//如果(图片实际宽度 > 指定宽度 或者 实际高度 > 指定高度)否则不做处理 var ratioA = imgW / maxW; var ratioB = imgH / maxH; if (ratioA > ratioB) {//当实际长宽比大于指定长宽比 imgH = maxW * (imgH / imgW); imgW = maxW;//此时以指定的宽度作为实际宽度,高度按实际比例由上式计算(不会超过指定高度) } else {//当实际长宽比小于等于指定长宽比 imgW = maxH * (imgW / imgH); imgH = maxH;//此时以指定的高度作为显示高度,宽度按实际比例由上式计算(不会超过指定宽度); } $(selector).attr('width', imgW);//替换内容中图片的实际宽度为处理后的显示宽度 $(selector).attr('height', imgH);//替换内容中图片的实际高度为处理后的显示高度 } }) } $("#test img").each(function (index, element) { resizeimg(this, 180, 180);// }); </script>
No2.灵活使用
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> *{ margin:0; padding:0} .p1,.p2,.p3{width:180px;height:180px;border:2px solid #393;background:#f00;display:inline-block;margin:20px 0 0 20px;text-align:center;vertical-align:middle} </style> <div id="test"> <p class="p1"><img src="test1.jpg" onload="resizeimg(this,180,180);"/></p> <p class="p2"><img src="test2.jpg" onload="resizeimg(this,180,180);"/></p> <p class="p3"><img src="test3.jpg" onload="resizeimg(this,180,180);"/></p> </div> <script type="text/javascript"> //obj是图片对象,this调用方法如上方所示 //maxW和maxH分别为指定的最大宽度和最大高度 //"实际宽度和高度"是指源文件的实际宽度和高度 //"显示宽度和高度"是指自适应处理后的宽度和高度,即最终效果 function resizeimg(obj, maxW, maxH) { var imgW = obj.width;//实际宽度赋值给imgW var imgH = obj.height;//实际高度赋值给imgH if (imgW > maxW || imgH > maxH) {//如果(图片实际宽度 > 指定宽度 或者 实际高度 > 指定高度)否则不做处理 var ratioA = imgW / maxW; var ratioB = imgH / maxH; if (ratioA > ratioB) {//当实际长宽比大于指定长宽比 imgH = maxW * (imgH / imgW); imgW = maxW;//此时以指定的宽度作为实际宽度,高度按实际比例由上式计算(不会超过指定高度) } else {//当实际长宽比小于等于指定长宽比 imgW = maxH * (imgW / imgH); imgH = maxH;//此时以指定的高度作为显示高度,宽度按实际比例由上式计算(不会超过指定宽度); } obj.width=imgW;//替换实际宽度为处理后的显示宽度 obj.height=imgH;//替换实际高度为处理后的显示高度 } } </script>
有朋自远方来...评论一下呗O(∩_∩)O