小程序中的图片宽度固定高度按比例自适应

最新推荐文章于 2025-05-09 20:54:58 发布

weixin_33862993

最新推荐文章于 2025-05-09 20:54:58 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：https://juejin.im/post/5b63cfd2e51d4576b8287e3b

本文通过实际案例介绍了解决Web端图片自适应的问题方法。详细分析了图片在不同设备上显示异常的原因，并给出了一种利用bindload事件动态调整图片尺寸的具体实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

按照UI的设计稿完成后，产品看到实现效果忙不迭的跑来了，说我配的图，都被截断了，这不是他想要的啊。然后忙不迭的又跑去找UI了。UI说，我的锅，这就改设计图，结果：开发就得无条件的改改改！！

调研：

web端的同事告诉我，width：100%，height不设，图片就会自动撑起来拉，so easy。但是。。。，easy出来的并没有效果！！然后去查了文档，image标签给的定义是这样的：

一定要注意这个里面的<注1>，因为如果不设置高度，会有一个默认的高度（我测试的设备是width：375px，会莫名奇妙的有个240px的默认高度）

定义中有个函数叫bindload，这个函数会返回具体的图片高度，只要加载完成后，重新设置下这个style，就可以达到效果了。

实现

下面是具体的实现代码，仅供参考：

    let width = event.detail.width
    let height = event.detail.height

    let windowWidth = wx.getSystemInfoSync().windowWidth
    let imageWith = windowWidth - 30
    let percent = (height / width) * 100 * (windowWidth - 30) / windowWidth
    let imageHeight = height * imageWith / width

    let detailIndex = event.currentTarget.dataset.key

    let list = this.data.detailImageLoadList || []
    let imageValue = {
      loaded: true,
      width: imageWith,
      height: imageHeight
    }
    list[detailIndex] = imageValue
    this.setData({
      detailImageLoadList: list
    })
复制代码

在wxml中，设置style：

   <image style="{{detailImageLoadList[index].width ? detailImageLoadList[index].width : 0}}px; height:{{detailImageLoadList[index].height ? detailImageLoadList[index].height : 0}}px"  src="" mode="aspectFill" bindload="detailPicLoad" data-key="{{index}}"/>
复制代码

OK，Done!

PS: 上面设置style的长语句，看着非常丑，可有优化的方法？（来自一个初学web的小伙伴）

转载于:https://juejin.im/post/5b63cfd2e51d4576b8287e3b