过期罐头电脑论坛-win7、win10雨人系统下载

过期罐头电脑论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
雨人系统 过期罐头 视频编辑软件 电脑维修 win7系统下载 win10系统下载
查看: 729|回复: 0
收起左侧

控制IMG图片的大小缩放

[复制链接]
发表于 2012-2-13 15:51:42 | 显示全部楼层 |阅读模式
发贴请勿包含网站外链(直接下载地址和网盘除外),屡犯者将封禁ID、网址永久屏蔽,www.gqgtpc.com感谢支持!
法一:
img 标签是没有 onload 事件的.所以 UBB 代码中的img用到的onload来处理大的图片进行自适应,这样的办法就不能采取了.
但是经过测试,body还是可以带onload事件的, 所以我解决的办法就是在页面全部加载完后再处理太大的图片.
于是用JS写了一段简单的代码
相关代码
function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}
然后 在 body 上加上 就可以了.
经过测试,在Mozilla和IE上通过.
在这里补充一下关于 图片的自适应,这点Mozilla做的比IE好,因为可以用CSS来控制图片的自适应.
我们都知道 Mozilla 支持一个 max-width 的CSS语法.于是,我们这样这样定义图片的全局样式
相关代码
img{
max-width:100%;height:auto;
}
这样图片就回在div或table内自动适应其大小了.

这也是一种很简单有效的方法:利用CSS+JS让图片自动缩放-图片不变形
.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
法二:
以前是判断heigth和width,然后再决定谁除谁再乘谁。怎么没有想到可以这样:?heigth和width只保留一个属性即可。
function resizeImg(img) {
try {
   if (img.offsetWidth > 0) {
    if (img.offsetWidth > img.height) {
     img.width = img.height;
     img.removeAttribute('height');
    }
   }
   else {
    setTimeout(function() {resizeImg(img);}, 50);
   }
}
catch (ex) {
   ;
}
}
<img onload='resizeImg(this);' height='220' src='upload/200812052052440545.gif'>
简洁代码是一种简洁但不简单的思想,是一种美。
方法三:(可以控制图片高、宽在超出规定范围的时候才缩放)
function resizeImgX(img,iwidth,iheight)
{
   var _img = new Image();
   _img.src = img.src;
   if(_img.width > _img.height)
   {
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
      img.height = (_img.height / _img.width) * img.width;
   }
   else if(_img.width < _img.height)
   {
      img.height = (_img.height > iheight) ? iheight : _img.height;
      img.width = (_img.width / _img.height) * img.height ;
   }
   else
   {
      img.height = (_img.height > iheight) ? iheight : _img.height;
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
   }
}
调用:
<img onload='resizeImg(this,500,400);' src='upload/200812052052440545.gif'>
方法四:
<script language="JavaScript">
<!--
function ResizeImages()
{
var myimg,oldwidth;
var maxwidth=180; //缩放系数
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
//-->
</script>

<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的高度)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
调用:<img src="images/toplogo.gif">



楼主热帖
[windows xp系统下载] 【智慧演绎 全新理念】蓝眼泪 GHO
[Windows7] Win7家庭版升级至旗舰版的方法
[闲聊杂侃] 冬春季节注意预防带状疱疹
[windows xp系统下载] 【2012.07DVD版】联盟GHOST_XP_SP
[u盘启动盘下载] U盘文件系统用哪个好
[windows xp系统下载] 菠萝庄园GHOST XP SP3电脑城装机版
[精品软件下载] 内存检测(MemTest 4.0 )专业版汉化绿色
[闲聊杂侃] 饭后这10种症状提示哪些疾病
[闲聊杂侃] 神奇紧运动操 让你全身都变瘦
[影视前线] 《陕北汉子》全集

您需要登录后才可以回帖 登录 | 注册

本版积分规则

win7 64位旗舰版下载|win10系统下载|win7旗舰版|联系我们|网站地图|

GMT+8, 2016-12-9 00:13 , Processed in 0.317459 second(s), 29 queries .

官方免责声明:本站内容来自网友和互联网.若侵犯到您的版权.请致信联系,我们将第一时间删除相关内容!

Powered by Discuz!

过期罐头电脑论坛

win7旗舰版_windows10

快速回复 返回顶部 返回列表