自动限制图片大小

最新推荐文章于 2024-04-11 19:30:00 发布

原创最新推荐文章于 2024-04-11 19:30:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #javascript #html

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

该博客主要展示了使用JavaScript实现自动限制图片大小的代码。定义了多个函数，如fixImageSize、setFixSize等，通过这些函数对图片的宽度和高度进行调整，确保图片在指定尺寸范围内显示，同时在HTML页面中调用相关函数实现图片大小的自动设置。

部署运行你感兴趣的模型镜像

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动限制图片大小</title>
<script language="javascript">
function fixImageSize(src, width, height){
var n=setInterval("setFixSize(" + src.uniqueID + ")", 100);
src.setAttribute("fixhandler", n);
src.onerror=function(){
  clearInterval(n);
  src.setAttribute("fixhandler");
}
}
function setFixSize(o){
var w=o.width;
var h=o.height;
if (!w*h) return;
var W=100; var H=100 //如果要统一尺寸，则把下面两行换成当前这一行，并且无需在IMG标签中设置 fixWidth, fixHeigh 属性
/*var W=o.getAttribute("fixwidth");
var H=o.getAttribute("fixheight");*/
if (w>W){
  h=h * (W/w);
  w=W;
}
if (h>H){
  w=w * (H/h);
  h=H;
}
o.width=w;
o.height=h;
var n=o.getAttribute("fixhandler");
clearInterval(n);
o.setAttribute ("fixhandler", 0);
}
function autoSetImageSize(o){
var a=arguments;
if (a.length==0) a=[document.body];
for (var i=0; i<document.images.length; i++)
  for (var j=0; j<a.length; j++)
   if (isAncestor(document.images[i], a[j])) setFixSize(document.images[i]);
}
function isAncestor(child, ancestor){
if (child && child.parentElement){
  if (child.parentElement==ancestor) return true;
  else return isAncestor(child.parentElement, ancestor);
}
return false;
}
</script>
</head>