jquery 简单设置图片自适应宽高(不完美)
2016-01-22 09:05
501 查看
需求的时间要求比较急,简单做了一个(基本够用):
调用需要在img加载完,否则会出现长和宽都是0的情况:
function setImgWidthHeight(){ var maxwidth = 800; var maxheight = 800; var img = new Image(); img.src =$("#imgShow").attr("src") ; // 初始化高度和宽度 $("#imgShow").width(img.width); $("#imgShow").height(img.height); //高度和宽度设置 //alert(img.width+" "+img.height); if (img.width > maxwidth) { $("#imgShow").width(maxwidth); // 再判断高度 var i = maxwidth/img.width; var ih = i*img.height; // 计算高度的缩放比例 if(ih>maxheight){ // 如果走到这里则图片会被拉伸 $("#imgShow").height(maxheight); }else{ $("#imgShow").height(ih); } }else{ if (img.height > maxheight) { $("#imgShow").height(maxheight); // 再判断宽度 var i = maxheight/img.height; var iw = i*img.width; if(iw>maxwidth){ $("#imgShow").width(maxwidth); }else{ $("#imgShow").width(iw); } } } }
调用需要在img加载完,否则会出现长和宽都是0的情况:
$(function(){ $('#imgShow').load(function(){ // 加载完成 setImgWidth(); }); });
相关文章推荐
- Cropper – 简单的 jQuery 图片裁剪插件
- jQuery解析json格式数据简单实例
- 基于jQuery仿淘宝产品图片放大镜特效
- 基于Jquery的商城商品图片的放大镜效果(非组件)
- 基于jQuery仿淘宝产品图片放大镜特效
- jQuery解析json格式数据简单实例
- jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
- jQuery validate插件实现ajax验证重复的2种方法
- jQuery弹层插件jquery.fancybox.js用法实例
- jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
- jQuery简单获取键盘事件的方法
- jQuery ajax时间差导致的变量赋值问题分析
- jquery.validate提示错误信息位置方法
- jQuery实现图片轮播效果
- jquery日历插件datepicker用法分析
- jquery采用oop模式class类的使用示例
- DOMLoaded 类似jquery的$(callback)
- 第二章 jQuery选择器
- 第三章 jQuery中的DOM操作
- jquery读写cookie