-
不要复制,会有错了,看明白原理就可以了
-
-
-
<script language="JavaScript" type="text/javascript">
-
-
function DrawImage(ImgD,FitWidth,FitHeight){
-
var image=new Image();
-
image.src=ImgD.src;
-
if(image.width>0 && image.height>0){
-
if(image.width/image.height>= FitWidth/FitHeight){
-
if(image.width>FitWidth){
-
ImgD.width=FitWidth;
-
ImgD.height=(image.height*FitWidth)/image.width;
-
}else{
-
ImgD.width=image.width;
-
ImgD.height=image.height;
-
}
-
} else{
-
if(image.height>FitHeight){
-
ImgD.height=FitHeight;
-
ImgD.width=(image.width*FitHeight)/image.height;
-
}else{
-
ImgD.width=image.width;
-
ImgD.height=image.height;
-
}
-
}
-
} } //--> </script>
<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />
如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为:
<img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" />
分享到:
相关推荐
js控制图片大小,并验证图片类型,兼容各浏览器,测试可用
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
JS控制图片上传大小,JS控制图片上传大小,JS控制图片上传大小。
纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/
javaScrpt控制图片的大小,希望可以帮助到你。
JS控制图片大小(等比例缩放)
js控制上传图片的大小 js控制上传图片的大小 js控制上传图片的大小
jQuery插件 拖拽和鼠标滚轮控制图片大小
js焦点图切换按钮控制大小图片滚动 js焦点图切换按钮控制大小图片滚动 js焦点图切换按钮控制大小图片滚动 js焦点图切换按钮控制大小图片滚动
主要介绍了js用拖动滑块来控制图片大小的方法,实例分析了javascript使用鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
控制图片显示代码输出大小的代码,javascript写的。
js特效脚本含源码和说明JQ控制图片大小代码本资源系百度网盘分享地址
直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小
用该js代码可以实现图片的等比输出,从而有效的避免图片输出后过大或严重变形的问题
使用js和css讲图片的现实控制在固定的区域内,大于这个区域的等比例缩放,小于这个区域的居中显示。 css+js完美控制图片大小 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
大家可以下载学习,谷歌的myfocus控制像素图片js库
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for...
js放大缩小拖拽图片(兼容IE、火狐)的js脚本实例
JS控制网页背景随窗口大小自动适应<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ; charset=utf-8"> 窗口背景变化 <style type="text/css"> *{margin:0;padding...