分享人：廣州華軟 佐羅

一. 前言

在前端開發過程中，設計稿中往往只提供一張圖片，但是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就有個完美的解決，其中尺寸選擇這個需要花點來拿捏，輕車熟路之後，再也不擔心設計稿一圖多用了

關於圖片適配不同尺寸的image View（實戰）