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(不支援),請自行嘗試。


沒有留言: