防止圖片尺寸太大撐破網頁：自動縮放圖片大小

script>

function resizeImg(obj) {
  var obj = document.getElementById(obj);
  var objContent = obj.innerHTML;
  var imgs = obj.getElementsByTagName('img');

  if(imgs==null)
    return;

  for(var i=0; i    if(imgs.width>parseInt(obj.style.width)) {
      imgs.width = parseInt(obj.style.width);
    }
  }
}

window.onload = function() {resizeImg('testDiv');} 

/script>

使用的時候只要修改 table 或 DIV 的 ID 名稱（紅色代碼的部分）就可以了。

---

二、CSS 的方法：


Image by Jerzy Górecki from Pixabay

現在我們用 CSS 來控制圖片自動大小，但是用 CSS 控制圖片大小會稍微影響網頁速度，如果有影響的話，可以改用上面的 JavaScript。

CSS 代碼如下，喜歡的可以收藏起來。

img {
  border:0;
  max-width:650px;
  overflow:hidden;
  width:expression(this.width > 650  ? 650 : "auto");
}

說明：
＊border 等於 0 是去掉圖片邊框；
＊max-width 是設置圖片最大寬度；
＊width:expression 是一段表達式，圖片寬度大於 650 像素的時候自動縮小到 650 像素寬度。