響應式圖片設計

圖片 reset

一般在 reset 圖片時，會加上這段，以達到圖片依解析度不同，而自適應變化，且保有最大尺寸。

img {
  max-width: 100%;
  height: auto;
}

width 和 max-width 的差異

假設兩者的屬性值皆為 100%：

• width：會依父元素的寬度，做滿版的寬度調整
  • 如在圖片解析度較小的情況，瀏覽的視覺上會較差
• max-width：等比例的寬度調整
  • 如在圖片解析度較小的情況，且外容器寬度大於圖片寬度時，並不會呈現滿版效果
  • 畫面縮小時，如有外容器寬度小於圖片寬度，則會自適應變化

圖片尺寸規劃

一般會刻意設計較大張的技巧。

• 手機板：寬度可以設定在 600px
• 平板以上：寬度可以設定在 1024px

補充

背景圖建議放 一比一 的圖片

主要區塊和 icon 建議放 兩倍 圖片或 svg 格式

banner 設計

縮放圖片

一般 banner 圖片的樣式會設定為 max-width: 100%，所以圖片寬度會隨著螢幕的縮放自適應延伸，不會超過螢幕的寬度。

但在手機版上，如果採用 直式 的 banner 圖片，則有可能高度會超過手機螢幕的高度，尤其在加上 logo 或導覽列等 header 後，banner 圖片會再被往下推，如此一來會造成使用者無法看到整張圖片，需要上下滑動，影響使用者體驗。

另外手機版的 banner 圖片可以 依照想要強調的主題做裁切，以避免 banner 畫面中的每個元素在手機版上顯示過小，反而會讓使用者覺得沒有重點。

背景擷取

當背景圖片寬度 小於外容器寬度 ，且設定 background-position: center、background-repeat: no-repeat，背景圖片的兩旁會出現白色區塊，使用者體驗上會較不好，這時可以加上 background-color: 色碼，將空白處補足。