保定网站建设,网站推广,网站优化服务,保定专业的PHP网站制作机构!

图片不超过外边框最大宽度js代码

发表于:2008年08月23日 17时  作者:dx_andy

上传一篇带图片的文章,没有设定图片的大小,结果图片撑大了外边框!这是一个很常见的问题?如果您是一个懂得Html的人肯定知道是什么原因,但是我们面对的客户群体不一样,他们可能对电脑似懂非懂,只是会些常用的操作。这时他问你这是什么问题?你说了半天可能他一点也没听懂,白白的浪费自己的时间;不如自己花心思写个脚本干掉这种不是问题的问题?

代码功能:设置一个图片的最大宽度,当图片宽度大于最大宽度时,将图片宽度设定为最大宽度,按比例缩小图片的高度!

JavaScript代码

function suitImg(id, maxWidth) {
var i = new Image();
i.src = id.src;
if (id.width > maxWidth) {
id.height = id.height*maxWidth/id.width;
id.width = maxWidth;
}
}

使用方法

<div style=”width:100px;”>
<img src=”/phplamp.org.gif” onload=”suitImg(this, 100)” />
</div>

 订阅“PHPLAMP博客”方便及时获取网站内容

PHPLAMP博客是专注于网站建设,搜索引擎研究,网站推广,网站优化的IT博客。

有关, , 的相关文章:

“图片不超过外边框最大宽度js代码” 共有8篇评论

  1. blankyao says:

    如果html标签中没有定义它的width和height,这种方法还能获得到么?

  2. admin says:

    只要您将此图片要显示的最大宽度传递给suitImg就行了!

  3. 最新电影 says:

    用ccs也行吧

  4. dx_andy says:

    CSS只能定义图片的宽度与高度,那样的话图片如果太大会显示不全。

  5. 火德 says:

    最好加个判断,以免高度比宽度大太多,破坏页面布局:)

    function suitImg(id, maxSize) {
        var i = new Image();
        i.src = id.src;
        if ( id.width > id.height && id.width > maxSize) {
            id.height = id.height*maxSize/id.width;
            id.width = maxSize;
        } else if ( id.width  maxSize) {
            id.width = id.width*maxSize/id.height;
    		id.height = maxSize;
    	}
    }
    
  6. dx_andy says:

    高度会自动按原宽度与现宽度的比例进行缩放,可以避免原图片失真太多。

  7. aa says:

    学习

  8. bb says:

    ff:max-width

发表一下您对本文的意见