微信小程序设置图像固定比例

今天介绍一种在任何容器中以固定比例保持图像的方法。

有时我们的图像尺寸不同，但我们需要设置图像以保持固定的比例。在小程序中，宽度固定为750rpx，因此如果我们需要将宽高比设置为2: 1，我们可以直接将图像css的宽度设置为固定值，然后高是固定值的一半。这使设定比率保持在不同的屏幕上。

但这不是很方便，例如，我想封装一个自定义组件，作为Cell的列表（我是iOS开发.），我只是设置列表的宽度，图像的宽度和高度细胞将被修复。

调用js操作DOM

DOM不能直接在小程序中操作，但微信也提供了接口：wxml节点信息API

1.当没有包组件时，我们可以在js文件中的onShow方法中使用它：

onShow: function（）{var that=thisvar 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：

此时，当我们将图像父视图的宽度设置为任意值时，图像将保持2：1的比例。

2，在自定义组件中，我们需要在ready方法中使用：

Ready: function（）{var that=thisvar query=wx.createSelectorQuery（）。in（this）//这在（this）query.select（'＃image'）中更多.boundingClientRect（function（res）{console。 log（res.width）that.setData（{height: res.width * 0.5 +'px'}）}）。exec（）}

组件中CSS和WXML中的设置与上面相同。

这是一个包装组件的简单演示：

将打包的组件放在scrollView

中

将打包的组件放在列表页面中

只要设置了组件的样式，就可以完美地调整图片和内容。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序 store

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。