JS图片自适应显示
2014-02-07 17:04
253 查看
在上一家公司的时候,由于项目的关系就一直想写一个这样的类出来用的了,无奈各种原因,搁置了。
刚好前段时间公司有个博客的项目,就心血来潮,搞了一个出来。在制作相册页面的时候很纠结。用户上传的照片的格式会有很多种,那么怎么才能让所有不同尺寸的图片都用相同的尺寸来显示而不影响排版呢?
分享两个自己写的方法
resizeImgCut方法对应以下图片,如果图片大于显示区域,显示区域只显示图片中间部分,如果图片小于显示区域,则保持原来的宽高,居中显示。
resizeImg方法对应以下图片,如果图片大于显示区域,显示区域显示图片全部并居中显示,如果图片小于显示区域,则保持原来的宽高,居中显示。
使用方法:
欢迎拍砖。。
刚好前段时间公司有个博客的项目,就心血来潮,搞了一个出来。在制作相册页面的时候很纠结。用户上传的照片的格式会有很多种,那么怎么才能让所有不同尺寸的图片都用相同的尺寸来显示而不影响排版呢?
分享两个自己写的方法
function resizeImg(tar,w,h){ var img = new Image(); img.src = tar.src; tar.style.visibility = 'hidden'; if(img.width>0 && img.height>0){ if(img.width<img.height){ if(img.width > w){ tar.height = h; tar.width = (img.width*h)/img.height; }else{ if(img.height < h){ tar.width = img.width; }else{ tar.height = h; } } }else if(img.height<img.width){ if(img.height > h){ tar.height = (img.height*w)/img.width; tar.width = w; }else{ if(img.width < w){ tar.height = img.height; }else{ tar.width = w; } } } tar.style.marginTop = -(tar.height - h)/2+"px"; tar.style.marginLeft = -(tar.width - w)/2+"px"; tar.style.visibility = 'visible'; } }
/* resizeImgCut 显示区域只显示图片中间部分并且居中 */ function resizeImgCut(tar,w,h){ var img = new Image(); img.src = tar.src; tar.style.visibility = 'hidden'; if(img.width>0 && img.height>0){ if(img.width<img.height){ if(img.width > w){ tar.width = w; tar.height = (img.height*w)/img.width; }else{ if(img.height < h){ tar.width = img.width; }else{ tar.height = h; } } }else if(img.height<img.width){ if(img.height > h){ tar.height = h; tar.width = (img.width*h)/img.height; }else{ if(img.width < w){ tar.height = img.height; }else{ tar.width = w; } } }else{ //tar.width = w; //tar.height = h; } tar.style.marginTop = -(tar.height - h)/2+"px"; tar.style.marginLeft = -(tar.width - w)/2+"px"; tar.style.visibility = 'visible'; } }
resizeImgCut方法对应以下图片,如果图片大于显示区域,显示区域只显示图片中间部分,如果图片小于显示区域,则保持原来的宽高,居中显示。
resizeImg方法对应以下图片,如果图片大于显示区域,显示区域显示图片全部并居中显示,如果图片小于显示区域,则保持原来的宽高,居中显示。
使用方法:
<img src="demo.jpg" onload="resizeImg(400,400,this)" />
欢迎拍砖。。
相关文章推荐
- JS&RE 控制图片显示大小, 弹出窗口自适应大小,自居中, 结合UBB与正则使用 By Stabx
- js瀑布流,实现图片自适应显示
- IE6下jquery js将图片写入html图片不显示的问题
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- js 鼠标移动显示图片的简单实例
- js实现的鼠标放上和移开显示不同图片和文字,样式比较好看
- JS实现控制图片显示大小的方法【图片等比例缩放功能】
- JS预览图像将本地图片显示到浏览器上
- js图片模糊切换显示特效的方法
- js实现图片在未加载完成前显示加载中字样
- js实现图片在未加载完成前显示加载中字样
- js点击上传图片后直接显示在内容框中
- JS操作DOM点击图片弹出层显示大图片和详细信息
- js上传照片,预览,压缩后base64编码发送后台,及将后台返回的base64图片显示到HTML
- js遍历本地所有图片文件,显示在浏览器中
- JS预览图像将本地图片显示到浏览器上
- js实现图片等比缩略显示 支持IE/FF
- React Js img 图片显示默认 占位符
- MFC picture control控件不失真自适应图片显示
- 用js实现的一个Flash滚动轮换显示图片代码生成器