微信小程序自适应

在微信小程序中实现图片自适应，可以采用以下几种方法：

1. 使用`mode=\"widthFix\"`属性：

在`image`标签中设置`mode=\"widthFix\"`，这样图片宽度会固定，高度会自动调整以适应容器。

```html```

2. 使用百分比或`rpx`单位：

设置图片的宽度为100%，高度使用百分比或`rpx`单位，以实现宽度自适应。

```cssimage { width: 100%； height: auto；}```

或者

```cssimage { width: 100rpx； height: auto；}```

3. 使用`bindload`事件：

通过`bindload`事件动态计算图片大小，确保图片不会超出容器的大小。

```javascriptPage（{ data: { list_1: [ { url: \'img/1.jpg\' }, { url: \'img/2.jpg\' }, { url: \'img/3.jpg\' }, { url: \'img/4.jpg\' } ], imgmsg: {} }, imageLoad: function（e） { const query = wx.createSelectorQuery（）； query.select（\'#image-container\'）.boundingClientRect（）； query.exec（（res） => { const containerWidth = res.width； const img = e.detail.detail.node； const imgWidth = img.width； const imgHeight = imgWidth * containerWidth / img.width； img.style.height = imgHeight + \'px\'； }）； }}）；```

4. 使用`aspectFit`属性：

使用组件的`mode=\"aspectFit\"`属性，结合百分比或`rpx`单位设置图片高度，以实现图片自适应显示。

```html```

5. 视频自适应：

对于视频组件，可以通过`bindloadedmetadata`事件获取视频的宽高信息，并设置相应的`aspect-ratio`和`height`样式。

```javascriptPage（{ data: { videoInfo: {} }, onLoad: function（） { const that = this； wx.chooseVideo（{ success: function（res） { const videoInfo = { width: res.width, height: res.height }； that.setData（{ videoInfo }）； } }）； }}）；```

以上方法可以帮助你在微信小程序中实现图片和视频的自适应显示。

其他小伙伴的相似问题：

微信小程序如何设置图片高度自动调整？

微信小程序视频自适应的代码实现？

如何在微信小程序中实现图片懒加载？