微信小程序的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) }) } }