微信小程序設置圖片固定比例

今天介紹一個讓圖片在任何容器都保持固定比例的方法。

有時我們的圖片并不是同一個比例，但是我們需要設置圖片保持一個固定的比例，在小程序里面因為寬度固定為750rpx,所以我們?nèi)绻枰O置寬高比為2 : 1的話直接設置圖片css的寬為一個固定值，然后高為固定值一半就行了。這樣在不同的屏幕下都能保持設定的比例。

但是這樣并不是很方便，比如我想封裝一個自定義組件，作為列表的Cell（我是iOS開發(fā)來著。。。），我只要設置列表的寬度，Cell里面圖片寬度和高度就定下來了。

調(diào)用js操作DOM

在小程序內(nèi)無法直接操作DOM，但是微信也是提供了接口的：wxml節(jié)點信息API

1.沒有封裝組件時，我們可以在js文件中的onShow方法中使用：

1. onShow: function() {
2. var that = this
3. var query = wx.createSelectorQuery()
4. query.select("#image").boundingClientRect(function(res) {
5. console.log(res.width)
6. that.setData({
7. height: res.width * 0.5 + 'px'
8. })
9. }).exec()
10. }

在css中設置圖片的寬width:100%,在wxml中設置圖片：

1. <image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}'></image>

此時，當我們設置圖片父視圖的寬為任意值，圖片都會保持2：1的比例。

2、在自定義組件中，我們需要在ready方法中使用：

1. ready:function() {
2. var that = this
3. var query = wx.createSelectorQuery().in(this) //此處多了in(this)
4. query.select("#image").boundingClientRect(function(res) {
5. console.log(res.width)
6. that.setData({
7. height: res.width * 0.5 + 'px'
8. })
9. }).exec()
10. }

組件內(nèi)CSS和WXML中設置和上方一樣。

這里有一個封裝好的組件的簡單DEMO：

將封裝好的組件放到scrollView內(nèi)

將封裝好的組件放到列表頁內(nèi)

只要設定好組件的樣式，里面圖片以及內(nèi)容都能完美適配。