上传一篇带图片的文章,没有设定图片的大小,结果图片撑大了外边框!这是一个很常见的问题?如果您是一个懂得Html的人肯定知道是什么原因,但是我们面对的客户群体不一样,他们可能对电脑似懂非懂,只是会些常用的操作。这时他问你这是什么问题?你说了半天可能他一点也没听懂,白白的浪费自己的时间;不如自己花心思写个脚本干掉这种不是问题的问题?
代码功能:设置一个图片的最大宽度,当图片宽度大于最大宽度时,将图片宽度设定为最大宽度,按比例缩小图片的高度!
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博客是专注于网站建设,搜索引擎研究,网站推广,网站优化的IT博客。
如果html标签中没有定义它的width和height,这种方法还能获得到么?
只要您将此图片要显示的最大宽度传递给suitImg就行了!
用ccs也行吧
CSS只能定义图片的宽度与高度,那样的话图片如果太大会显示不全。
最好加个判断,以免高度比宽度大太多,破坏页面布局:)
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; } }高度会自动按原宽度与现宽度的比例进行缩放,可以避免原图片失真太多。
学习
ff:max-width