分享人：廣州華軟 佐羅
一. 前言
在前端開發過程中，設計稿中往往只提供一張圖片，但是app內需要用到的尺寸各種各樣。
同時圖片不僅是資訊的直接表達，也會為網站起到美觀點綴的作用，圖片的變形、過分裁切會引起使用者吐糟，給使用者帶來不好的使用者體驗.
這該如何是好，難道真的要設計多個尺寸或者後臺新增多個上傳尺寸，其實未然
二. 目錄
1. 避免一圖多尺寸
2. 歸納圖片比例
3. 前端實現
3.1 實現方法
3.2 示例
4.總結
三. 避免一圖多尺寸
一張圖片在網站裡可能會有多個展示位，儘量保持一個尺寸。如果不能保持一個尺寸，也儘量按原大圖進行比例縮放。縱觀多圖的網站，大多都會盡量一個圖只有一個尺寸，然後同比縮放。
四. 歸納圖片比例
在設計的時候就先列出了圖片的所有可能出現的位置，決定進行統一比例的設計，就是所有圖都是按照比例去設計。這樣圖片可以完美適配手機螢幕，簡單統一。
五. 前端實現
5.1 實現方法
利用css提供的position、overflow 與transform 屬性來實現圖片保持居中不變行並適當隱藏部分圖片內容。
1. Position：該屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
2. Overflow：該屬性規定當內容溢位元素框時發生的事情。
3. Transform：該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
5.2 示例
正常情況
處理後的情況
六. 總結
按照上述方法來，關於圖片適配不同尺寸的image View就有個完美的解決，其中尺寸選擇這個需要花點來拿捏，輕車熟路之後，再也不擔心設計稿一圖多用了