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({
                width: realWidth * (maxHeight / realHeight),
                height: maxHeight
            })
        } else {
            setStlye({
                width: maxWidth,
                height: realHeight * (maxWidth / realWidth)
            })
        }
    }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM