使用CSS和Javascript控制網頁圖片寬度的大小的方法

第一個方法是使用CSS來實現控制大小：

img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width); max-height:590px;
height:expression(this.height>590?"590px":this.height);
}

如果你要兼容IE6的話，可以配合使用以前介紹的這個Javascript腳本。

第二個方法是使用Javascript來控制控制網頁圖片寬度的大小：

function set_img_size(obj, width)
{
    if (!obj) return ;
    if (!width) {
        width = obj.clientWidth * 0.9;
        if (width < 400) return; /*設置圖片的限定寬度*/
    }
    img_items = obj.getElementsByTagName("img")
    if (img_items)  {
        for (i=0; i<img_items.length; i++) {
            var s_width = img_items[i].width;
            var s_height = img_items[i].height;
            if (s_width > width) {
                img_items[i].style.width = width + "px";
                if (s_height == img_items[i].height) {
                    img_items[i].style.height = ((width / s_width) * img_items[i].height) + "px";
                }
                img_items[i].onclick = function() {window.open(this.src)};
                img_items[i].style.cursor = "pointer";
                img_items[i].alt = "點擊查看原始尺寸";
            }
        }
    }
}   

function selfadaptation_size() {
    if (typeof(content_img_width) == 'undefined')
        set_img_size(document.getElementById("posts")); /*控制圖片所在的元素ID號*/
    else
        set_img_size(document.getElementById("posts"), content_img_width); /*控制圖片所在的元素ID號*/   

    set_img_size(document.getElementById("custom")); /*控制圖片所在的元素ID號*/
}   

if (window.addEventListener)
    window.addEventListener("load", selfadaptation_size, false);
else if (window.attachEvent)
    window.attachEvent("onload", selfadaptation_size);
else
    window.onload = selfadaptation_size;