让图片自适应大小

laohoucn

于 2007-06-07 15:22:00 发布

阅读量2.1k

点赞数

文章标签： firefox opera function 扩展测试 ie

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/laohoucn/article/details/1642475

版权

本人原创的一段实现图片自适应大小的JS

在IE 6,Firefox 2,Opera 9下测试通过

需在<body>添加onload属性：例如：<body οnlοad="resizeimg('YourtagId',500)">

说明：
属性tagId：指定的标签的Id
属性maxW：指定最大宽度
该函数实现在一指定ID的标签下的所有以img标签插入的图片自动适应（不超过）一个指定的最大宽度，图片宽度小于等于指定最大宽度的，不改变其大小，图片大于最大宽度的，按比例缩放。

缺点：先按图片原始大小显示图片，然后再进行缩放，可以看到一个很明显的图片缩放的过程，在此恳请诸位网友指点修正一下。

< script type = " text/JavaScript " >

<!--

// Created by laohou(youqlim@gmail.com) at June 7th,2007

function resizeimg(tagId,maxW) {

var wh=1;

var tag=document.getElementById(tagId);

var imgs=tag.getElementsByTagName("img");

var imgslen=imgs.length;

for(var i=0;i<imgslen;i++) {

if(imgs[i].offsetWidth>maxW) {

wh=imgs[i].offsetWidth/imgs[i].offsetHeight;

imgs[i].style.width=maxW+'px';

imgs[i].style.height=maxW/wh+'px';

}

}

}

// -->

</ script >

后话：可以根据我上面的代码或者思路进行扩展，比如图片自适应高度，页面上所有的图片的自适应……等等

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。