關(guān)鍵詞: 微信小程序 圖片真實大小? 圖片模式詳解
這兩天自己設(shè)計了兩張微信廣告橫幅,電腦設(shè)計尺寸為750*300像素,傳到微信小程序圖標(biāo)組件中,設(shè)置設(shè)備為iPhone6 375* 667 DPR為2,理論像素為750像素,應(yīng)該為完全填充,但是尺寸并未填充完整屏幕.下面是拿一張尺寸圖進行填充,示例如下:
在左邊的微信調(diào)試(IPhone6)中750像素寬度完成展示出來, 如果想讓設(shè)計稿真?zhèn)€圖片不拉伸完全填充,那設(shè)計稿應(yīng)該設(shè)計多少像素呢? 答案是電腦中設(shè)計820像素, 如何算出來,也是無意中,調(diào)到設(shè)備寬320時,自動鋪滿, 有時就是這么巧, 320/350 ,這個比例記好, 在設(shè)計時能設(shè)計最合適的稿件.
了解了圖片真實顯示后,如何寫樣式,讓圖片達到原先的比例呢?給 image 設(shè)置了寬度100%后，設(shè)置 height:auto; 圖片沒有像預(yù)先效果長高,反而不見了,這讓我百思不得其解,之后,看了同事代碼,他使用的方法是利用全局對象,得到屏幕寬度,在設(shè)置高度為寬度的幾分之幾.最后想出較優(yōu)方法是設(shè)置組件的寬高,寬高設(shè)置就用到了前一篇文章的em(rem);兩者在我看來沒什么差別.還是以上面750像素為例,750像素要填充整個頁面寬度, 整個頁面寬度,微信將它等分20個em,我們這樣寫
<image src='/images/3.png"? style='width:20em' />?
高度是寬度的2倍, 不就是 height=40em; 這個圖片會設(shè)置了,其他的圖片等比就是這樣來設(shè)置,em.題外話高度用EM設(shè)置很方便,尤其是用在盒模型裝載圖片,文字的排版上)
上面的技巧都是自己總結(jié)出啦的野路子.接下來咱們來講講正規(guī)化的image組件中的模式.以下是官方文檔
mode 有效值：
mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
模式值說明
縮放scaleToFill不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放aspectFit保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放aspectFill----保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
縮放widthFix----寬度不變，高度自動變化，保持原圖寬高比不變
裁剪top----不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪bottom----不縮放圖片，只顯示圖片的底部區(qū)域
裁剪center----不縮放圖片，只顯示圖片的中間區(qū)域
裁剪left----不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪right----不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪top left----不縮放圖片，只顯示圖片的左上邊區(qū)域
裁剪top right----不縮放圖片，只顯示圖片的右上邊區(qū)域
裁剪bottom left----不縮放圖片，只顯示圖片的左下邊區(qū)域
裁剪bottom right----不縮放圖片，只顯示圖片的右下邊區(qū)域
這里面常用的的是 ?aspectFit ?aspectFill ?widthFix ?scaleToFill 其他的可以不用去考慮
scaleToFill不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素,很好理解,如果這樣好理解,那就錯了,我們還是以上圖750像素為例,第一張是設(shè)置scaleToFill ,父元素寬高未設(shè)定.第二張父元素寬高有設(shè)定.
剛開始我認(rèn)為它的模式是對父元素起作用,這個是錯誤的邏輯,糾正一下,Image 模式都是針對自身樣式進行設(shè)定,那要怎么用呢;?來寫一個。
<image src='/images/x1.png'? mode='scaleToFill'? style='height:20em; width:30em' />
整個拉伸了,這里為了方便,都是寫內(nèi)聯(lián)樣式.scalToFill在實際開發(fā)中很少用.只要理解了image 的模式是相對于自身樣式,就很好理解下面模式.
aspectFit保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來.應(yīng)用方法,設(shè)置image 樣式的高度,不用設(shè)置寬度, 圖片就自動等比縮放.
aspectFill:保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來.
widthFix; ?相當(dāng)于HTML中的cover; 圖片寬度完成顯示出來,這個最常用.
后續(xù)還有更多的干貨,添加微信公眾號,將他分享給你身邊的碼農(nóng),設(shè)計師
