让图片不超过外边框最大宽度
上传一篇带图片的文章,没有设定图片的大小,结果图片撑大了外边框!这是一个很常见的问题?如果您是一个懂得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;
}
}
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>
<img src="/phplamp.org.gif" onload="suitImg(this, 100)" />
</div>