前端工程師學習Media Query的路上有我罩之流動圖片

前端工程師學習Media Query的路上有我罩之流動圖片

前端工程師學習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 ,若圖尺寸不夠則無法填滿。

 

 

本篇為「前端工程師必備的RWD基礎」系列文章最後一篇,全系列目錄如下:

(目錄)

  1. 前端工程師必備的RWD基礎(一)RWD基礎概念
  2. 前端工程師必備的RWD基礎(二)流動布局Fluid Grid
  3. 前端工程師必備的RWD基礎(三)Media Query基礎之Media Query使用方法
  4. 前端工程師必備的RWD基礎(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師必備的RWD基礎(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師必備的RWD基礎(六)Media Query基礎之Media Features-上
  7. 前端工程師必備的RWD基礎(七)Media Query基礎之Media Features-下
  8. 前端工程師必備的RWD基礎-(八)流動圖片Fluid Image

 

 

延伸閱讀好精彩:

RWD是啥?前端工程師用三面相讓你秒懂(三)媒體查詢

前端工程師學習Media Query的路上有我罩之媒體類型

前端工程師學習Media Query的路上有我罩之插入字條件

吼!才14歲的AI天才,早就知道Python有多重要了!(上)

吼!才14歲的AI天才,早就知道Python有多重要了!(下)

前端工程師必學的CSS小貼士:常見邊框屬性解釋

NOWnews 今日新聞

 

 

 

本篇發表於 前端工程師教學 並標籤為 , , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料