5-2. 認識瀏覽器事件resize()及設計隨視窗比例縮放的影像

(1) 認識瀏覽器改變視窗尺寸的事件resize()

事件及相關 說明
resize() 當瀏覽器窗口大小改變時resize事件, 語法：$(selector).resize(function),[參考][參考]

 

(2) 運用resize()事件設計隨視窗等比例縮放的影像背景

 

運用CSS設計影像滿版於視窗, 但影像並無等比例縮放
 

運用CSS設計影像寬度滿版於視窗, 而高度等比例縮放
 

運用CSS3設計區塊背景滿版於視窗, 但影像並無等比例縮放
  運用CSS3設計區塊背景寬度滿版於視窗, 而高度等比例縮放
  運用CSS3設計頁面背景滿版於視窗, 且依等比例縮放影像
  運用jQuery設計影像滿滿版於視窗, 且依等比例縮放影像
     

(3) 影像比例摘要說明