关于前端:图片等比压缩适应父盒子宽高并且不被裁切

60次阅读

共计 1645 个字符，预计需要花费 5 分钟才能阅读完成。

最近开发的性能，图片不被裁切的展现在父盒子中并且不超过父盒子的宽高，如果图片宽高小于父盒子宽高，则原尺寸展现。上面是代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 图片等比压缩适应父盒子宽高，并且不被裁切 </title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .logo-wrap {background-color: rgba(0, 0, 0, 0.5);
            width: 375px;
            height: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 父盒子的宽高 375  200 -->
        <div class="logo-wrap">
            <img class="logo" ref="logo" :src="imgsArr[1]" alt="">
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    imgsArr: [
                        'imgs/1.png',
                        'imgs/2.jpg',
                        'imgs/3.png',
                        'imgs/4.png',
                        'imgs/5.jpg',
                    ],
                    // 通过等比压缩后的图片宽度
                    width: '',
                    // 通过等比压缩后的图片高度
                    height: '',
                }
            },
            mounted() {
                let that = this;
                let width = '';
                let height = '';
                // 创立实例对象
                var img = new Image();
                // 图片地址
                img.src = this.imgsArr[1];
                // 为什么要写 onload  是因为要等他加载完之后能力获取到图片宽高, 
                // 间接通过 this.$refs.logo.offsetWidth 获取图片的宽高是 0
                img.onload = function () {
                    // 返回的宽高是元素的理论大小
                    width = img.width;
                    height = img.height;
                    // 图片的宽高比
                    let ratio = width / height;
                    // 父盒子的宽高比
                    let bili = 375 / 200;
                    // 只有图片宽或者高大于父盒子对应的宽高才会执行，否则就展现原图的尺寸
                    if ((width >= 375 && height <= 200) || (width >= 375 && height >= 200) || width <= 375 && height >= 200) {
                        // 阐明图片最大的尺寸是宽度
                        if (ratio > bili) {height = Math.round(375 / width * height);
                            width = 375;
                            console.log('走 1')
                        } else {
                            // 阐明图片最大的尺寸是高度
                            width = Math.round(200 / height * width);
                            height = 200;
                            console.log('走 2')
                        }
                        // 图片宽高相等的状况
                    } else if (width == height && height >= 200) {
                        width = height = 200;
                        console.log('走 3')
                    };
                    that.width = width;
                    that.height = height;
                    console.log(width, height, '解决过后的图片宽高');
                    that.$refs.logo.style.width = that.width + 'px';
                    that.$refs.logo.style.height = that.height + 'px';
                }
            },
        })
    </script>


</body>

</html>

要留神 this.$refs.logo.offsetWidth 获取动静图片的宽高是 0，须要用 img.onload 办法。
成果：

这就是我的总结。

正文完