根據比例縮放圖片的尺寸不變形程式碼例項

antzone發表於2017-04-03

本章節介紹一下如何根據比例實現圖片的不變形縮放效果。

下面是一段帶程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function imageResize(thisobj, limitW, limitH) {
  var newW;
  var newH;
  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;
  } 
  else if (thisobj.height > limitH) {
    newH = limitH;
    newW = parseInt(thisobj.width * newH / thisobj.height);
    thisobj.width = newW;
    thisobj.height = newH;
  }
}
window.onload=function(){
  var two=document.getElementById("two");
  imageResize(two,200,200);
}
</script>
</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用法詳解一章節。

相關文章