日前客戶抱怨有個系統使用者的版面亂掉，我過去看一下…喔，那位使用者在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

 
  • Hemidemi
  • MyShare
  • Udn
  • funP
  • Furl