<script type="text/javascript">
        /******最完美解決 圖片在圖片框內按寬高比例自動縮放！！！***/
        //Img:要放圖片的img元素，onload時傳參可用this

        //maxHeight  :img元素的高度，畫素（圖片框 最大高度）

        //maxWidth:img元素的寬度，畫素（圖片框 最大寬度）
        function AutoSize(Img, maxWidth, maxHeight) {
            var image = new Image();
            //原圖片原始地址（用於獲取原圖片的真實寬高，當<img>標籤指定了寬、高時不受影響）
            image.src = Img.src;  
            // 當圖片比圖片框小時不做任何改變 
            if (image.width < maxWidth&& image.height < maxHeight) {
                Img.width = image.width;
                Img.height = image.height;
            }
            else //原圖片寬高比例 大於 圖片框寬高比例,則以框的寬為標準縮放，反之以框的高為標準縮放
 

            {
                if (maxWidth/ maxHeight  <= image.width / image.height) //原圖片寬高比例 大於 圖片框寬高比例
                {
                    Img.width = maxWidth;   //以框的寬度為標準
                    Img.height = maxWidth* (image.height / image.width);
                } 
                else {   //原圖片寬高比例 小於 圖片框寬高比例
                    Img.width = maxHeight  * (image.width / image.height);
                    Img.height = maxHeight  ;   //以框的高度為標準
                }
            }

        }
    </script>
 

下面附上W3School有關HTML <img> 標籤的說明：

定義和用法

<img> 標籤的 height 和 width 屬性設定影象的尺寸。

提示：為影象指定 height 和 width 屬性是一個好習慣。如果設定了這些屬性，就可以在頁面載入時為影象預留空間。如果沒有這些屬性，瀏覽器就無法瞭解影象的尺寸，也就無法為影象保留合適的空間，因此當影象載入時，頁面的佈局就會發生變化。（下面的篇幅詳細解釋了這個觀點）。

提示：請不要通過 height 和 width 屬性來縮放影象。如果通過 height 和 width 屬性來縮小影象，那麼使用者就必須下載大容量的影象（即使影象在頁面上看上去很小）。正確的做法是，在網頁上使用影象之前，應該通過軟體把影象處理為合適的尺寸。

更多例項

改變影象大小 - 製作填充影象

height 和 width 屬性有一種隱藏的特性，就是人們無需指定影象的實際大小，也就是說，這兩個值可以比實際的尺寸大一些或小一些。瀏覽器會自動調整影象，使其適應這個預留空間的大小。使用這種方法就可以很容易地為大影象建立其縮圖，以及放大很小的影象。但需要注意的是：瀏覽器還是必須要下載整個檔案，不管它最終顯示的尺寸到底是多大，而且，如果沒有保持其原來的寬度和高度比例，影象會發生扭曲。

使用 height 和 width 屬性的另外一種技巧，是可以非常容易地實現對頁面區域的填充，同時還可以改善文件的效能。設想一下，如果你想在文件中放置一個彩色的橫條。您不需要建立一個具有完整尺寸的影象，相反，您只要建立一個寬度和高度都為 1 個畫素的影象，並把自己希望使用的顏色賦給它。然後使用 height 和 width 屬性把它擴充套件到更大的尺寸。

<img src="/i/ct_1px.gif" width="200px" height="30px" />

這是上面這段 HTML 的效果，這個顏色彩條是用只有一個畫素的影象製成的：

使用百分比值

使用 width 屬性的最後一個技巧是使用百分比值來代替畫素的絕對值。這將使瀏覽器按照與瀏覽器顯示視窗的一定比例來縮放影象。因此，如果要建立一個寬度與顯示視窗寬度相同，高度為 30 個畫素的彩色橫條，可以這樣實現：

<img src="/i/ct_1px.gif" width="60%" height="30px" />

當文件視窗的大小改變時，這個影象的大小也會隨之改變：

提示：如果提供了一個百分比形式的 width 值而忽略了 height，那麼不管是放大還是縮小，瀏覽器都將保持影象的寬高比例。這意味著影象的高度與寬度之比將不會發生變化，影象也就不會發生扭曲。

請看下面的 HTML：

<img src="/i/ct_1px.gif" width="20%" />

也就是說，如果只設置影象 ct_1px.gif 的 width 屬性的百分比值，會得到一個矩形影象（這是因為原始的 ct_1px.gif 就是一個只有 1px 寬和高的矩形）：

詳解 height 和 width 屬性

為什麼要使用 height 和 width 屬性

您是否見過當文件載入時其內容會顯示不規律的移動。之所以會這樣，是因為瀏覽器為了能夠顯示每一個載入的影象，而不斷地重新調整頁面的佈局。瀏覽器通過下載並解析出影象的寬度和高度來決定影象的大小，然後就會在顯示視窗中留出一個相應的矩形空間。然後瀏覽器就會調整頁面的顯示佈局，以便把影象插入到顯示當中。這同時也告訴我們，影象是獨立的檔案，它與原始檔都分別是獨立載入的。

但是這不是一種最有效的顯示文件的方法，因為瀏覽器在顯示相鄰的以及後面的文件內容之前，必須要檢查每一個影象檔案，並計算它們的螢幕空間。這可能會給文件的顯示帶來非常大的延遲，從而打斷使用者的閱讀。

對於創作者來說，一種更為有效的方法是通過 <img> 標籤的 height 和 width 屬性來指定影象的尺寸。這樣的話，瀏覽器在下載影象之前就為其預留出了位置，從而可以加速文件的顯示，還可以避免文件內容的移動。這兩個屬性都要求是整數值，並以畫素為單位來表示影象尺寸。這兩個屬性在 <img> 標籤中出現的次序並不重要。

height 和 width 屬性的問題

雖然 <img> 標籤的 height 和 width 屬效能夠改善效能並讓你實現一些小技巧，但在使用它們時還是有一些棘手的負面效果。即使使用者已經關掉了自動下載影象的功能，瀏覽器還是要把為影象預留的空間以指定的尺寸顯示出來。而這樣留給讀者的通常是一個空的框架，裡面有一個毫無意義的圖示，表示這是放置影象的位置。這時頁面將看上去非常糟糕，就像根本沒有完成一樣，並且大部分內容都毫無用處。如果不用這些指定的尺寸，則瀏覽器將只是在文字中放置一個影象圖示，這樣顯示中至少還有一些文字可以閱讀。

對於這個問題我們還沒有解決方案，只能強調一點，就是去使用 alt 屬性和一些描述性文字，這樣讀者至少知道這裡缺少的是什麼東西。我們還是建議您使用這些尺寸屬性，因為我們鼓勵一切能夠改善網路效能的行為。

提示：您可以線上測試工具中親自試一試！

提示：以上例子的目的是為了使您更好地理解 height 和 width 屬性的用法。如果您只是需要大面積的純色塊來裝飾頁面，那麼更好的辦法是使用 CSS 來建立背景色。