文章前提

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中 / width: 100% 與 max-width:100%差異 範例

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

RWD多欄式圖文

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

RWD背景圖片

環境: 圖片位置寫於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 區塊）大小而調整背景圖片的百分比、將背景圖片放大並填滿整個容器區域或是自動縮小背景圖片的大小使其可以完整呈現於容器的範圍內

• contain background-size:contain;
  • 如果背景圖有設定寬高，會自適應在設定的寬高內。
• cover 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;    
  }
}

參考文章

1. Wibibi -background-position
2. Wibi - background-size
3. MDN web docs-background position
4. w3schools- RWD Images