图片区域大小是固定的,但图片的大小不是固定的。需要按照图片的比例来缩放。以下代码解决问题:
<!--
var flag=false;
function limitImage(ImgD){
var areaWidth = 560; //你放置图片区域的宽度。
var areaHeight = 400; //你放置图片区域的高度。
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= areaWidth/areaHeight){
if(image.width>areaWidth){
ImgD.width=areaWidth;
ImgD.height=(image.height*areaWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}else{
if(image.height>areaHeight){
ImgD.height=areaHeight;
ImgD.width=(image.width*areaHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
<img src="xxxx" border="0" onload="javascript:limitImage(this);" />
将JS中areaWidth/areaHeight设置为自己区域大小即可。
分享到:
相关推荐
js限制图片大小的代码,用于网站的图片超出范围固定
限制图片大小。类型js限制图片大小。
javascript 实现限制上传文件大小
通过Js限制上传文件格式和限制文件大小
很好用的JS上传图片检测文件,包括检测图片大小,类型,错误信息的输出等等,一般网站上传图片前用这个检测足够用了
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
js控制上传图片的大小 js控制上传图片的大小 js控制上传图片的大小
js限制网站图片最大尺寸 按比例缩小图片
JS控制图片上传大小,JS控制图片上传大小,JS控制图片上传大小。
直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小
使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果…//允许上传图片文件的大小 具体代码如下 代码如下: [removed] var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=”....
asp前台图片限制显示大小 将文件嵌入页面,通过传参数的方式调用函数来制定需要显示图片的大小
控制图片显示代码输出大小的代码,javascript写的。
自动压缩图片限制格式大小显示缩略图兼容GB2312的JS插件
resizepic.js就是我整理的可保持原比例不变改变图片大小的JS,很好用,有实例index.htm。 原图显示(534 X 800) onload="AutoResizeImage(0,0,this) 1.按宽度250压缩,不限制高度 按比例压缩 onload=...
插件功能 1、批量选择图片,限制限制...4、可以自定义限制图片的单文件大小,默认是4MB 5、使用简单引用css和js ,并且在页面加上标签即可使用 插件介绍 https://blog.csdn.net/qq_27559331/article/details/81913108
限制图片大小:K为单位 3.限制图片宽高:px为单位(要么都有,要么都无) 4.限制已经损坏的图片(没有预览的图片) 5.限制更改过扩展名的图片(比如强制把一个动态的GIF扩展名改为JPG了) 使用限制: 要在InputFile...
一般的js本地判断在某些浏览器上是不兼容的,而本款是通过flash +Js进行本地判断大小后并上传,解决部分人上传超大文件页面报错,以及上传大文件服务压力大的问题。 falsh + js判断哦。准确而安全。 iis配置指向文件...
* 限制图片显示的size. * * @param thisobj 图片组件 * @param limitW 限制宽度大小 * @param limitH 限制高度大小 */ function imageResize(thisobj, limitW, limitH) { var newW; var newH; if (thisobj....
我加了css的限制: 代码如下:div img {}{max-width:600px;width:600px;width:[removed]document.body... ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大