初階前端工程師常識集(四)-流動圖片如何設定?
許多前端工程師都要處理 RWD網頁。這些 RWD網頁中的圖片如下圖所示，是能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。
#banner {
max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/
}
上述為一般圖片的 Fluid Image 設定，接下來說明背景圖的部分。相信大家已經看到夠多美美的滿版圖片的網頁了吧? 這是因為前端工程師在背景圖的設定上，CSS3 的新屬性「background-size」可以指定背景圖片的大小是否可填滿整個容器。未指定「background-size」屬性的話就是 auto 原圖的大小，若有指定為 cover 的話，則可使背景填滿容器。下例為背景圖片的 Fluid Image 設定為填滿容器的語法：
#banner {
background-size: cover;
}
下圖為 background-size 是否有指定為 cover 的差異。左上為有指定為 cover 的範例，右下為無指定 cover ，若圖尺寸不夠則無法填滿。
本篇為「前端工程師必備的RWD基礎」系列文章最後一篇，全系列目錄如下:
(目錄)
|
更多閱讀:
初階前端工程師常識集(五)-媒體特徵介紹<上>
初階前端工程師常識集(三)-如何規劃流動布局?
前端工程師除了RWD別無選擇?選對方法就可以辦到SEO無痛!
實用HTML5教學小技巧二-如何使用HTML來做表格~
學網路行銷課程最重要的是,永遠不要輕忽鄉民的力量!
中國IT教育領導品牌 達內教育集團第一家海外授權中心
AI 人工智慧越來越靠近你我的生活!
