在預設的情形下,特定標籤在畫面上呈現的大小是固定的,你可以透過 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 ,如下式:
屬性 resize 表示允許縮放調整,因此現在重新載入網頁會出現以下的效果:


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

由於空間不足以顯示整張圖片,因此出現了捲軸以支援圖片的捲動,現在將 <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(不支援),請自行嘗試。
沒有留言:
張貼留言