根据比例缩放图片的尺寸不变形代码实例

快乐打工仔 分类:实例代码

本章节介绍一下如何根据比例实现图片的不变形缩放效果。

下面是一段带代码实例:

<!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用法详解一章节。

根据比例缩放图片的尺寸不变形代码实例

回复

我来回复
  • 暂无回复内容