resize 屬性與動態縮放

在預設的情形下，特定標籤在畫面上呈現的大小是固定的，你可以透過 width 與 height 這兩個屬性進行設定，不過並一旦網頁載入完成，並沒有辦法再讓使用者調整其大小，除非撰寫相關的程式。現在你可以透過設定 resize 樣式屬性，以支援動態縮放調整。
於畫面上配置一個 <div> 標籤，並且將示範用的圖檔嵌入其中如下：

<div  style="overflow:auto;width:400px;height:60px;

          　　background:black ;padding:100px;  " >

    <img src="girlt.jpg" />

</div>

其中的 <div> 設定為寬 400 高 600 ，這小於其中配置的圖片尺寸，由於 overflow 設定為 auto ，因此為出現以下的結果畫面：

由於空間不足以顯示整張圖片，因此出現了捲軸以支援圖片的捲動，現在將 <div> 標籤的 resize 屬性設定為 both ，如下式：

<div  style="overflow:auto; resize:both;width:400px;height:60px;

          　　 background:black ;padding:100px;  " >

    <img src="girlt.jpg" />

</div>

屬性 resize 表示允許縮放調整，因此現在重新載入網頁會出現以下的效果：

右下角出現可供拖拉的標示，按下左鍵拖曳即可動態拖放整個 <div> 標籤區域的大小，如下圖：

resize 屬性可以指定幾個可能的值，分別是 both（長/寬）、horizontal（寬）、vertical(高）以及 none（不支援），請自行嘗試。

繼續閱讀…