图片等比例缩放算法(计算缩放后的宽高)

让图片能够自适应父容器的宽高,并且保证图片不变形不溢出,那么就需要对图片进行等比例缩放,拿到缩放后的宽高重新赋值即可,具体算法如下:

// 分别传入图片宽高、父容器宽高
const transformImgRatio = (imgWidth, imgHeight, containerWidth, containerHeight) => {
    let [
        // 用于设定图片的宽和高
        tempWidth,
        tempHeight,
    ] = [
            0,
            0
        ]
    try {
        imgWidth = parseFloat(imgWidth)
        imgHeight = parseFloat(imgHeight)
        containerWidth = parseFloat(containerWidth)
        containerHeight = parseFloat(containerHeight)
    } catch (error) {
        throw new Error('抱歉,我只接收数值类型或者可以转成数值类型的参数')
    }

    if (imgWidth > 0 && imgHeight > 0) {
        //原图片宽高比例 大于 指定的宽高比例,这就说明了原图片的宽度必然 > 高度
        if (imgWidth / imgHeight >= containerWidth / containerHeight) {
            if (imgWidth > containerWidth) {
                tempWidth = containerWidth
                // 按原图片的比例进行缩放
                tempHeight = (imgHeight * containerWidth) / imgWidth
            } else {
                // 按照图片的大小进行缩放
                tempWidth = imgWidth
                tempHeight = imgHeight
            }
        } else {  // 原图片的高度必然 > 宽度
            if (imgHeight > containerHeight) {

                tempHeight = containerHeight
                // 按原图片的比例进行缩放
                tempWidth = (imgWidth * containerHeight) / imgHeight
            } else {
                // 按原图片的大小进行缩放
                tempWidth = imgWidth
                tempHeight = imgHeight
            }
        }
    }

    return { width: tempWidth, height: tempHeight }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值