`
xitong
  • 浏览: 6176980 次
文章分类
社区版块
存档分类
最新评论

使用js控制图片尺寸

 
阅读更多
需求:
用户上传图片后,前台显示,如果不对显示进行控制,图片会变形
<img id="img1" src="${vo.baby.picPath?if_exists}" border="0" img src="images/blackice.jpg" onload="if(this.width>200 && this.width<300) this.width=300; if(this.width>300) this.width=380;">


用户上传图片的尺寸通常无法控制,(当然你也可以在后台代码中对上传的图片进行处理,这样可以对图片的显示作精细的控制),如果你觉得麻烦的话 ,完全可以通过js作些控制,虽然粗糙但可行且简单。

注意对图片的显示最后不要将width和height定死,否则一些怪图片就容易变形,你可以根据需求控制其中某一个,并且再通过onload再作些处理,这样使得图片的显示和原来的图片不会有太大差距。

但使用后发现使用<img>的onload有些问题,在firefox下行为正常,但在IE下行为怪异,大多数情况并没有实现对图片尺寸的控制。不得已只有写body 的onload
onload="if(document.getElementById('img1').width>200 && document.getElementById('img1').width<300) document.getElementById('img1').width=300; if(document.getElementById('img1').width>300) document.getElementById('img1').width=380;"

这样写在IE和firefox下都正常了,不过总是觉得很怪,如果该页面很复杂,加载时间长的话,那么图片的尺寸会有比较长时间的渐变,虽然不理想,但一般情况可以满足

最简单的情况就是不写任何js,直接将img的height或width定死,也可以。但对一些尺寸特殊的情况会有点惨不忍睹
分享到:
评论

相关推荐

    js控制上传图片的大小

    js控制上传图片的大小 js控制上传图片的大小 js控制上传图片的大小

    js实现页面展示图片

    js实现前端展示图片,不用提交后端服务,就可以把图片转换成base64编码展示在前端页面,而且可以对图片的尺寸进行压缩控制

    JS超酷图片翻动展示效果.zip

    JS超酷图片翻动展示效果,根据鼠标进出图片的方向来控制图片进出的方式,效果超炫,兼容主流浏览器。 使用方法: 1、head区域引用文件 lrtk.css,animation.css 2、在文件中加入!-- 代码 开始 --!-- 代码 结束 --...

    wangEditor.js

    直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小

    vlightbox 图片浏览 及 上传图片尺寸大小控制 源码

    1.使用vlightbox 模版及CSS,将图片自动缩放。不在需要依靠JS 对图片大小进行控制。 2.附带一个常见JS检测图片大小功能。

    Js幻灯图片切换代码.rar

    不过看了很多,却发现对于项目开发来说,很多的焦点图片却不是那么容易使用的:有的需要为之定义一个文本文件,有的兼容性存在问题,有的是基于jQuery实现的插件需加载过多的脚本,有的不能自适应图片的尺寸,有的会...

    JS等比例缩小图片尺寸的实例

    而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度。 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    JavaScript等比例缩放图片控制超出范围的图片

    js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,软件开发网以稳定页面布局,本代码段就是完成...

    JavaScript 图片切割效果

    容器的大小一般是固定的,但图片的大小就不是固定的,这里又可以使用SetSize程序用来设置图片大小: Code var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图...

    JavaScript画廊插件FlexImages.zip

    FlexImages 是一款轻量级的 ...通过CSS控制图片间距,可灵活调整。完整显示图片,不会裁剪图片,也不会打乱图片顺序。支持无限滚动支持图片和iframe内容懒加载可随意控制布局显示行数 标签:FlexImages

    HTML3D轮播切换图片源码附注释.rar

    源码使用CSS属性+原生js代码实现图片轮播切换、图片整体跟随鼠标移动效果、图片整体鼠标滚轮控制缩放,使用的css属性包括:弹性盒布局元素居中、背景图片平铺尺寸设置、相对、绝对定位、滤镜效果、图片层级、边距...

    Cropper.js 实现裁剪图片并上传(PC端)

    由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器,所以上网查询了很多资料,也试用了许多案例,发现cropper插件裁剪是比较完善的,所以结合之前的使用情况,编写了此案例。本案例是参考cropper...

    js使用小技巧

    取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...

    960*330宽屏风格的JS图片切换.rar

    960*330宽屏风格的JS图片切换,基于JavaScript flash xml三者结合编写的焦点图代码,左下角的小圆点即是控制按钮,点击一次图片滚动切换到下一幅,XML中可设置图片地址和图片链接,切换时候带模糊效果,图片尺寸可以...

    JavaScript网页特效范例宝典源码

    实例078 通过JavaScript控制表单的提交与重置 122 实例079 带记忆功能的表单 123 实例080 防止表单重复提交 124 实例081 自动提交表单 125 实例082 通过for循环获取表单元素的中文名称 126 实例083 可以提交到不同...

    css+js完美控制图片大小

    在做网站的时候,往往图片的处理很重要,固定尺寸容易变形拉伸,不固定又会有不可预知的问题,有可能撑开页面。

    纯JavaScript库使用Canvas生成QR代码

    qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。

    全屏自适应带标题和简要的js幻灯片轮播代码

    支持全屏自适应,带有图片标题和简要的js幻灯片轮播代码,支持左右箭头控制幻灯图,功能比较实用,幻灯图片尺寸为800x349像素。

Global site tag (gtag.js) - Google Analytics