font

5月 12, 2014

用CSS就能讓圖片自動填滿不同解析度螢幕&行動裝置



前陣子在煩惱網頁圖片在不同解析度的螢幕寬度沒辦法有一致性:
例如圖片寬度1280px,那麼在螢幕寬度1024px解析度之下看左右是滿的,
但在寬度1960px的解析度下觀看左右就會多了空白

而且就算直接把圖片的css設定成width:100%,
太寬的圖片在iPad上看也依舊會爆炸般的跑版(沒有做RWD的網頁很容易有這狀況),
而這方法是我目前找到可以在各種解析度以及在行動裝置上正常觀看的最佳解法。


參考了一下flyingV的首頁banner,在任何解析度的螢幕之下,
banner的圖片依舊是填滿網頁左右邊的整個寬度,甚至用iPad看也一樣。
這東西我研究了很久到底是怎麼做到的?!
因為偶是初學者,語法很菜,看了半天還以為要用到jquery,
結果,偶臭了!


其實這東西的奧妙,
就只是把圖片設定成背景圖片的方式,
background-image: url(你的圖片網址);

並且在圖片的css設定裡加入這一小段:
background-size:cover;

如此一來就可以把網頁整個可視範圍整個覆蓋住了!
不過當然你要準備至少寬度是1960px的高解析度圖片,
才能應付的了各種解析度的瀏覽器,撐到最大時也不至於呈現馬賽克狀。


就是那麼簡單,甚至連html都不用改呢寶傑!


※2016.12.21補充:
測試發現就算背景設定了cover和no-repeat,有時候超大螢幕或當高度比寬度多很多的時候(例如ipad直式、或手動把瀏覽器比例調成直的長方形)圖片底下依舊會出現空白,好像沒有填滿的很完全,只要改成這樣:
background:url(你的圖片網址) no-repeat fixed;

就完美解決!






Related Posts Plugin for WordPress, Blogger...

ShareThis