今天介绍一个让图片在任何容器都保持固定比例的方法。有时我们的图片并不是同一个比例，但是我们需要设置图片保持一个固定的比例，在小程序(procedure)里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置 。。
今天介绍一个让图片在任何容器都保持固定比例的方法。
有时我们的图片并不是同一个比例，但是我们需要设置图片保持一个固定的比例，在小程序(procedure)里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值，然后高为固定值一半就行了。这样在不同的屏幕下都能保持设定的比例。
但是这样并不是很方便，比如我想封装一个自定义组件，作为列表的Cell（我是iOS开发来着。。），我只要设置列表的宽度，Cell里面图片宽度和高度就定下来了。
首先我百度到两种方法：
一、调用js操作DOM
在小程序(procedure)内无法直接操作DOM，但是微信也是提供了接口(interface)的：wxml节点信息API
1。没有封装组件时，我们可以在js文件中的onShow方法中使用：
onShow: function() {
var that = this
var query = wx。createSelectorQuery()
query。select("#image")。boundingClientRect(function(res) {
console。log(res。width)
that。setData({
height: res。width * 0。5 + 'px'
})
})。exec()}
在css中设置图片的宽width:100%,在wxml中设置图片：
lt;image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}' gt; lt;/image gt;
此时，当我们设置图片父视图的宽为任意值，图片都会保持2：1的比例。
2、在自定义组件中，我们需要在ready方法中使用：
ready:function() {
var that = this
var query = wx。宁波微信小程序开发其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 createSelectorQuery()。in(this) //此处多了in(this)
query。select("#image")。boundingClientRect(function(res) {
console。log(res。width)
that。setData({
height: res。宁波微信小程序开发其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
宁波小程序开发对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。width * 0。5 + 'px'
})
})。exec()}
组件内CSS和WXML中设置和上方一样。
这里有一个封装好的组件的简单DEMO：
将封装好的组件放到scrollView内
将封装好的组件放到列表页内
只要设定好组件的样式，里面图片以及网站内容都能完美适配。
二、使用padding-bottom，overflow结合，具体参考这篇博客。
我照着做了，效果也出来了，但是当我放到scrollView中时，因为图片太高了（虽然看不出来），只是被隐藏了，所以导致scrollView被撑得非常高，只能设置scrollView的高度才能正常显示，但此时又显得不够动态了，所以我放弃了这种方式，推荐大家使用第一种。
