標籤的 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 個像素的彩色橫條,可以這樣實現:
當文檔窗口的大小改變時,這個圖像的大小也會隨之改變:
提示:如果提供了一個百分比形式的 width 值而忽略了 height,那麼不管是放大還是縮小,瀏覽器都將保持圖像的寬高比例。這意味着圖像的高度與寬度之比將不會發生變化,圖像也就不會發生扭曲。
請看下面的 HTML:
也就是說,如果只設置圖像 ct_1px.gif 的 width 屬性的百分比值,會得到一個矩形圖像(這是因為原始的 ct_1px.gif 就是一個只有 1px 寬和高的矩形)
1、統一大小?
我的網頁上面有許多的圖片,有的大,有的小,我想如果圖片大的實現縮放,所有的都是一般大。來看看沒有是什麼效果。
大家看的出來,非常的難看的,於是我想讓有沒有一種方法是把那個大的變成小的呢?
<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /></li>
效果圖如下:
但是如果圖片太小了呢?就會被放大,好難看!!!有沒有什麼辦法讓大的變小,小的不被放大的方法呢?
效果如下: