加载到图片之后,对图片进行等比例填充缩放
2014-04-22 10:41
519 查看
<!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" /> <title>Reset Picture Size</title> <style type="text/css"> html,body,div,img{ margin:0; padding:0; border:0; } .wrapper { height: 500px; width: 1000px; margin:0 auto; } .pic_box{ margin:30px auto; height:100px;//高度,需要和js中设置的高度target_h一致 width:200px;//宽度,需要和js中设置的宽度target_w一致 overflow:hidden;//隐藏多余的部分 position:relative; } .pic_box img{ position:absolute;//需要用到绝对定位 } </style> </head> <body> <div class="wrapper"> <div class="pic_box"> <img id="J_pic" /> </div> </div> </body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $('#J_pic').attr({'src':'test_pic/pic1.jpg','onerror':'img_error();'});//动态加载图片地址,onerror在图片加载不到的时候选用默认图 reset_pic_size();//重新设置图片大小和位置 }); var target_w = 200; var target_h = 100; function reset_pic_size(){ var originImage = new Image(); originImage.src = $('#J_pic').attr('src');//获取原始图片 if( originImage.complete ){ var pic_origin_w = originImage.width;//图片原始宽度 var pic_origin_h = originImage.height;//图片原始高度 reload_pic(pic_origin_w,pic_origin_h);//重新设定加载图片 }else{ originImage.onload = function(){ var pic_origin_w = originImage.width; var pic_origin_h = originImage.height; reload_pic(pic_origin_w,pic_origin_h); }; } } function reload_pic(width,height){ var pic_origin_w = width;//原始宽度 var pic_origin_h = height;//原始高度 var pic_scale;//最终选用的缩放比例 var pic_new_w, pic_new_h;//图片新的宽高 var pic_top, pic_left;//图片定位用的left和top值 var pic_w_scale = target_w/pic_origin_w; var pic_h_scale = target_h/pic_origin_h; if( pic_w_scale > pic_h_scale ){//如果宽度比比高度比的比值大,说明需要按照宽度的比例进行缩放 pic_scale = pic_w_scale; pic_new_h = pic_scale * pic_origin_h; pic_new_w = target_w; pic_left = 0; pic_top = (pic_new_h-target_h)/2; }else{//如果宽度比比高度比的比值小,说明需要按照高度的比例进行缩放 pic_scale = pic_h_scale; pic_new_w = pic_scale * pic_origin_w; pic_new_h = target_h; pic_top = 0; pic_left = (pic_new_w-target_w)/2; } $('#J_pic').css({'height':pic_new_h+'px','width':pic_new_w+'px','top':'-'+pic_top+'px','left':'-'+pic_left+'px'}).show(); } function img_error(){ $('#J_pic').attr('src','test_pic/default.png'); reset_pic_size(); } </script> </html>
相关文章推荐
- 加载到图片之后,对图片进行等比例填充缩放 分类: 图片等比缩放 加载图片后缩放 图片缩放 2014-04-22 10:41 312人阅读 评论(0) 收藏
- 图片等比例压缩 ---已经测试 好用----图片加载完成以后再进行缩放
- Glide加载时等比例缩放图片至屏幕宽度
- 使用Glide加载网络图片,使用photoView进行缩放
- 一起学android之对资源图片进行比例缩放 (27)
- C# 中如何是PictureBox 按比例的缩放加载图片
- UIWebView改变HTML中图片的大小,进行等比例缩放
- WebView加载完网页之后利用js进行网页刷新,解决webview显示图片适应所有的机型
- Picasso图片加载框架的使用及加载网络图片等比例缩放
- jquery 图片预加载 自动等比例缩放插件
- C# PictureBox 按比例的缩放加载图片
- android 加载大图片时计算图片的缩放比例
- android图片等比例缩放 填充屏幕
- Android 使用Picasso加载网络图片等比例缩放
- 一个对上传图片进行处理的函数(等比例缩放) --koma
- 【转】 jQuery-图片预加载+等比例缩放
- jq图片预加载+自动等比例缩放插件
- [DevExpress]C#picturebox或者Dev控件 PictureEdit 按比例的缩放加载图片
- Asp.net 让图片按比例进行缩放显示
- 图片在未加载完成前显示“加载中...”(图片等比例缩放)