根据比例缩放图片的尺寸不变形代码实例
分类:实例代码
本章节介绍一下如何根据比例实现图片的不变形缩放效果。
下面是一段带代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="/wp-content/uploads/front-end-tutorial/head><body><div><img id="one" src="img.jpg"></div> <div><img id="two" src="img.jpg"></div> </body> </html>
上面的代码展示了图片等比例缩放效果,第一个是原图,第二个是缩放后的图片,下面介绍一下实现过程。
一.代码注释:
(1).function imageResize(thisobj, limitW, limitH) {},实现了缩放效果,第一个参数img对象,第二个是宽度,第三个是高度。
(2).var newW,声明一个变量用来存储新的宽度。
(3).var newH,声明一个变量用来存储新的高度。
(4).if (thisobj.width > limitW) {
newW = limitW;
newH = parseInt(thisobj.height * newW / thisobj.width);
// 按宽度比例缩放
if (newH > limitH){
newH = limitH;
newW = parseInt(thisobj.width * newH / thisobj.height);
}
thisobj.width = newW;
thisobj.height = newH;
},这个基本是一个数学问题了,通过它就可以获取图片应该的尺寸。
二.相关阅读:
(1).parseInt()方法可以参阅javascript parseInt()一章节。
(2).window.onload可以参阅window.onload用法详解一章节。
网站出售中,有意者加微信:javadudu