今天介绍一个让图片在任何容器都坚持牢靠比例的要领。。

有时pp电子图片并不是统一个比例，，，可是我们需要设置图片坚持一个牢靠的比例，，，在小程序内里由于宽度牢靠为750rpx,以是我们若是需要设置宽高比为2 : 1的话直接设置图片css的宽为一个牢靠值，，，然后高为牢靠值一半就行了。。这样在差别的屏幕下都能坚持设定的比例。。

可是这样并不是很利便，，，好比我想封装一个自界说组件，，，作为列表的Cell（我是iOS开发来着。。。。。。），，，我只要设置列表的宽度，，，Cell内里图片宽度和高度就定下来了。。

挪用js操作DOM

在小程序内无法直接操作DOM，，，可是微信也是提供了接口的：wxml节点信息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. }

组件内CSS和WXML中设置和上方一样。。

这里有一个封装好的组件的简朴DEMO：

将封装好的组件放到scrollView内

将封装好的组件放到列表页内

只要设定好组件的样式，，，内里图片以及内容都能完善适配。。