可隨螢幕自動縮放的圖片

這是可以自動縮放的圖片效果

可隨螢幕自動縮放的圖片

原始圖檔 pic01.jpg 尺寸為 600 X 450 。
使用 JavaScript 程式後，便可將此圖檔依據螢幕解析度自動縮放此圖片尺寸，以適合任何不同大小視窗。
請使用滑鼠嘗試伸縮這個網頁頁面，便可看出效果。
你也可以在此圖檔上使用滑鼠右鍵，選擇內容，查看你伸縮過的尺寸。
注意：此 JavaScript 圖檔語法如果放於表格內，將無此功能。
缺點：一個網頁只能放一張這個圖檔語法，超過第二個將無此功能。
使用 JavaScript 程式如下：

<script language="JavaScript" type="text/javascript">
<!--
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
else
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
}
//-->
</script>

<BODY onresize="resizeImage()">

本報導資料來源：Dynamic Drive Forums

其實使用最基本的 HTML 標籤，也可達成一樣效果 Go。

這個也可判斷瀏覽器窗口大小，他是使用兩張圖檔，來替換網頁內的圖片。
官方網站：Resizing Images Based On Browser Window Size Build Internet! Go。
請使用滑鼠嘗試伸縮這個示範網頁頁面，便可看出效果 Go。

請按瀏覽器的檢視原始碼查看