Ray

一、使用width或max-width:
width:100%依照父元素大小而可以自適應延伸，如果父元素太大圖片解析度會變差。
max-width:100%可以放大保有原本寬度，向內縮也可以。

二、rwd時css reset增加幾項
img {
max-width:100%;保持原圖大小，也可向內縮
height:auto;
}

同一張圖片在pc table phone上會越來越大
所以如果用的圖是小圖要使用大圖
避免pad跟phone上圖解析度太差
建議大圖尺寸600X400

三、rwd時banner設定
1.準備大圖小圖兩張圖
2.img用全域設定max-width:100%
height:auto


四、rwd時banner用background-image設定時
height:420px; 高度設定
background-color:black;延伸背景設定（與圖片相關色系）
background-repeat:no-repeat;
background-position:center center;
background-image: url()

@media 寬度600以下換另一張小圖

五、使用img或者background-image的建議：
1.用background-image當banner:Banner裡面如果有放字，
而且要考量在手機上顯示會不會過小，是否要把文字拆出來放。當然純img也可以（使用絕對定位）。

2.電子商務上面的產品列表，通常都是直接插入 img，畢竟你不可能在 css 放各種產品背景圖案，
但也是有跟後端配合時 在HTML標籤上寫 style background ，最後在圖片上面插入文字
有的網站的作法則是 PC一張、Mobile一張，文字太長會導致在手機與桌機上辨識不清楚所以蓋在上面。

3.依照「文字是否要放在圖內」、「圖片有無要設計兩種size以上(PC、Mobile)」、
「思考要怎麼跟後端配合，他要依照什麼規則在後台上圖，前台也會跟著正常」這三點來衡量，
最後再依照設計師提供給的設計稿來決定要怎麼開發 web layout。