taro3.x: 图片自适应处理(mode属性)

微信小程序的image标签中有个mode属性，使用aspectFill即可

注：image组件默认宽度300px、高度225px

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式

mode: 'aspectFit' 的处理模式：

const handleLoaded = (e) => {
        const maxWidth = Taro.getSystemInfoSync().windowWidth
        const maxHeight = 280
        const ratio = maxWidth / maxHeight
        const realWidth = e.detail.width
        const realHeight = e.detail.height
        const imgRatio = realWidth / realHeight

        if (ratio > imgRatio) {
            setStlye({
                 realWidth * (maxHeight / realHeight),
                height: maxHeight
            })
        } else {
            setStlye({
                 maxWidth,
                height: realHeight * (maxWidth / realWidth)
            })
        }
    }

taro3.x: 图片自适应处理(mode属性)

相关推荐