關於圖片適配不同尺寸的image View(實戰)
阿新 • • 發佈:2019-04-05
一個 nsf 實現 info 內容 處理 css 不能 需要
分享人:廣州華軟 佐羅
一. 前言
在前端開發過程中,設計稿中往往只提供一張圖片,但是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(實戰)