前端工程師課程再進化-Media Query的流動圖片
真正內行的前端工程師怎麼會把Media Query學一半?最後一個關於它的"流動圖片",現在端上來給你!
許多前端工程師在面對網頁設計時，都要處理 RWD網頁。這些 RWD網頁中的圖片如下圖所示，能根據網頁的大小而跟著放大或縮小。這就是所謂的「Fluid Image (流動圖片)」。
在RWD網頁中圖片的顯示方式有兩種，一種是傳統的「<img>」標籤，另一種就是直接使用 CSS 的背景圖。在網頁中插入一般的圖片，也就是使用「<img>」標籤的場合時，只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，另一個則設為 auto 則可以達到 RWD 的效果，範例如下：
#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 ，若圖尺寸不夠則無法填滿。
🔑不要錯過延伸閱讀：
靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢
前端工程師課程再進化-Media Query的CSS插入字條件
前端工程師課程再進化-Media Query的媒體類型
特斯拉創辦人竟因為他而退出親手創立的AI人工智慧團隊?!!
長尾關鍵字你在哪?我在找你~~~~~
人工智慧妙用多,連Walmart也是愛用者!
中國IT教育領導品牌 達內教育集團第一家海外授權中心
