javascript將超出div大小的圖片自動縮小至範圍內

日前客戶抱怨有個系統使用者的版面亂掉,我過去看一下…喔,那位使用者在html編輯器裡貼一張寬度為1600px圖片,也不去拖拉縮小圖片就更新到自己的個人頁面,當然會亂掉。
javascript將超出div大小的圖片自動縮小至範圍內

首先,我說在內容區塊加個提示敘述,請使用者自行動手在編輯器裡修改(心想:這樣最省事)…噗,客戶不接受…唉,那超出版面寬度或高度大小的圖片自動縮小至符合版面大小,這總該可以吧。

使用javascript:

<script language="javaScript">
function imgResize() {
  //假設要縮放的圖片在一個div區塊且id為aboutme
  var imgNum = document.getElementById("aboutme").getElementsByTagName("img").length;

  for(i=0;i<imgNum;i++) {
    imgObj = document.getElementById("aboutme").getElementsByTagName("img")[i];
  
    //自訂圖片寬度大小
    if(imgObj.width>500) imgObj.width = 500;
  
    //自訂圖片高度大小
    if(imgObj.height>700) imgObj.height=700;
  }
}
window.onload = imgResize;
</script>

註1:參考JavaScript支持IE和FireFox浏览器自动缩放图片代码
註2:另外記錄div 实现长英文字母自动换行CSS的文章,還有css文字語法參考
註3:Handling wide images in fixed-width layouts

您可能也會喜歡…

4 個回應

  1. sinchen表示:

    很方便的JS與法,但為何不採用CSS去控制圖片大小呢?

  2. ANDY表示:

    我是希望說只有當超出範圍圖片時才會縮小…比方說使用者上傳了三張寬度各為100px,200px,900px的圖片,但只有900px的圖片才會被縮小

    css只能統一圖片寬度,沒法視情況判斷圖片是否應該縮小^^”

  3. sonsie表示:

    CSS也可以的
    用expression
    可以搜下

  4. lala表示:

    min-width:最小寬度
    max-whdth:最大寬度
    在這個範圍內都OK喔~:D

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *