首頁 web前端 js教程 JavaScript限定圖片顯示大小的方法_javascript技巧

JavaScript限定圖片顯示大小的方法_javascript技巧

May 16, 2016 pm 04:10 PM
javascript 圖片 方法

本文實例講述了JavaScript限定圖片顯示大小的方法。分享給大家供大家參考。具體實作方法如下:

/**
 * 限制图片显示的size.
 * 
 * @param thisobj 图片组件
 * @param limitW 限制宽度大小
 * @param limitH 限制高度大小
 */
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;
  }
}
登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? 小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡? Mar 22, 2024 am 08:06 AM

小紅書發布自動儲存圖片怎麼解決?發布自動保存圖片在哪裡?

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 Mar 28, 2024 pm 12:50 PM

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程

抖音評論裡怎麼發圖片?評論區圖片入口在哪裡? 抖音評論裡怎麼發圖片?評論區圖片入口在哪裡? Mar 21, 2024 pm 09:12 PM

抖音評論裡怎麼發圖片?評論區圖片入口在哪裡?

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) 微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) May 01, 2024 pm 12:01 PM

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人)

ppt怎麼讓圖片一張一張出來 ppt怎麼讓圖片一張一張出來 Mar 25, 2024 pm 04:00 PM

ppt怎麼讓圖片一張一張出來

快速掌握:華為手機開啟兩個微信帳號方法大揭密! 快速掌握:華為手機開啟兩個微信帳號方法大揭密! Mar 23, 2024 am 10:42 AM

快速掌握:華為手機開啟兩個微信帳號方法大揭密!

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) 手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) May 04, 2024 pm 06:01 PM

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋)

wps文檔中兩張圖片怎麼並排 wps文檔中兩張圖片怎麼並排 Mar 20, 2024 pm 04:00 PM

wps文檔中兩張圖片怎麼並排

See all articles