RWD 響應式圖片設計

文章前提

RWD 圖片寫於 HTML 與 CSS 的用法、background-size 屬性、background-position 屬性、RWD 圖片最小高度 min-height 設定

RWD 圖片的 CSS Reset

如有後台可自行上傳圖片的網站，先設定圖片的 css reset 可避免使用者上傳解析度太大的圖片，導致破版。

img{
    max-width:100%; /*不使用width:100% 是因避免圖片解析度不好，隨父元素被放大時會糊掉*/
    height:auto;
}

RWD 圖片於不同設備中 size 設定

通常圖片會依不同設備做不一樣的排版方式(直式為例): 手機 1 欄、平板 2 欄、桌機 3 欄
如果以高螢幕解析度的桌機 (3欄) 圖為 300px 下去定寬度，到了手機 1 欄呈現為 600px 就會糊掉，所以請依需呈現尺寸較大的圖下去設定寬度的解析度。
圖片大小會大概抓 width:600px ，盡量不要放 1000px 以上，如果很多圖片一起的話會手機瀏覽會跑很慢。
RWD 網頁中，LOGO 建議是用 svg 格式的圖片，才不會因瀏覽器的大小而導致圖片失真。

RWD 圖片於 HTML 中設定

環境: 圖片位置寫於 HTML 中，width: 100%; 與 max-width:100%; 差異範例

RWD圖片設定示意圖

width: 100%;
會隨圖片的背景容器等比例縮放，如果背景容器是body圖片解析度不夠的話，放太大會有糊掉的問題。
max-width:100%;
保有圖片原始大小。瀏覽器變大，最大也是原始尺寸大小；瀏覽器縮小會等比例縮小。

RWD 多欄式圖文範例

依不同載具準備不同解析度的圖片。
『小心』多欄式設計時不要以為高螢幕解析度是小解析度小圖，就把手機的 img 一併設小解析度圖。
- WHY? 因設定桌機 → 手機，欄數由三欄至一欄排列。所以高解析度的桌機在多欄式圖文中，圖片解析度會比手機小。所以可以 html 的 img 可以一併設定給手機的圖即可。

RWD 圖片於 CSS 中的背景圖片設定

環境: 圖片位置寫於css中
顯示方式: banner圖片向內縮，是以截圖方式截掉圖片範例

.banner{
  background: url(圖片路徑) no-repeat;
  height: 420px;/*自訂*/
  background-position:center center;
}
/*
1.banner沒有寫寬度，背景圖尺寸會隨著父元素
2.center 背景圖置中
3.background-size可試著寫入cover(背景圖小於容器時會放大填滿容器) 或 contain(背景圖有設定寬高，會自適應在設定的寬高內)
*/

[註] 圖片放置 css 屬性的 background 內參考文章 w3schools- RWD Images

background-position 屬性

用來定義圖片位置

第一與第二個值表示: 水平方向的對齊位置垂直方向的對齊位置
background-position 屬性可參考
- Wibibi -background-position 文章
```
background-position: center center;/*圖片垂直水平置中*/
```

background-size 屬性範例

背景圖片的寬度與高度、根據容器（如 DIV 區塊）大小而調整背景圖片的百分比、將背景圖片放大並填滿整個容器區域或是自動縮小背景圖片的大小使其可以完整呈現於容器的範圍內

background-size:contain;
如果背景圖有設定寬高，會自適應在設定的寬高內。
background-size:cover;
背景圖片小於容器時，將背景圖片的大小放大至容器大小並填滿
background size 其他屬性們可參考
- w3schools- RWD Images
- Wibi – background-size

斷點最小高度設定範例

環境 : 大解析度寫到小解析度

大解析度背景圖設定指定高度，記得在寫小解析度時 @media(max-width:900px){} 把原先高度拿掉，設定 min-height 才會有反應。

<div class="box">
  <div class="inbox"></div>
</div>

*,*:before,*:after{box-sizing: border-box;}
.box{
  max-width:700px;
  margin: 0 auto;
  border:5px solid #fe5f55;
}
.inbox{
  background: url(https://upload.cc/i1/2019/09/25/JqCLzk.jpg
) no-repeat;
  width: 100%;
  height: 350px;
  background-size:cover;
  background-position:center center;
}
@media(max-width:900px){
  .inbox{
    height:auto;/*取代 斷點900px以上設定的 350px高度，不然下方的最小高度500px會無效*/
    min-height:500px;    
  }
}

參考文章