javascript 指定区域内图片等比例缩放实现代码脚本之家整合版原创

JavaScript 实现指定区域内图片等比例缩放可以使用如下代码：

function imgZoom(img,w,h) {
    if(img.width>w){
        img.height=(img.height*w)/ img.width;
        img.width=w;
    }
    if(img.height>h){
        img.width=(img.width*h)/ img.height;
        img.height=h;
    }
    return img;
}

该函数的参数分别为待缩放的图片、指定图片显示区域的宽和高。该函数先判断图片是否超过了指定区域，若超过了则按照比例缩小到指定区域内。该函数的返回值为缩放后的图片对象。

示例1：对单张图片进行等比例缩放

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Img Zoom Demo</title>
    <script type="text/javascript"
            src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        #box {
            width: 400px;
            height: 400px;
            border: 1px solid #000000;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }

        #box img {
            position: absolute;
            left: -10000px;
            top: -10000px;
            max-width: none !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var img = new Image();
            img.src = 'sample.jpg';
            img.onload = function () {
                $('#box').append(imgZoom(img, 400, 400));
            }
        });

        function imgZoom(img,w,h) {
            if(img.width>w){
                img.height=(img.height*w)/ img.width;
                img.width=w;
            }
            if(img.height>h){
                img.width=(img.width*h)/ img.height;
                img.height=h;
            }
            return img;
        }
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

该示例代码中实现了对一张图片进行等比例缩放并显示在指定的区域内。

示例2：对多张图片进行等比例缩放

<!DOCTYPE html>
<html>
<head>
    <title>Javascript Img Zoom Demo</title>
    <script type="text/javascript"
            src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            margin: 20px;
            overflow: hidden;
            position: relative;
            float: left;
        }

        .box img {
            position: absolute;
            left: -10000px;
            top: -10000px;
            max-width: none !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var imgs = ['sample1.jpg', 'sample2.jpg', 'sample3.jpg', 'sample4.jpg'];
            for (var i = 0; i < imgs.length; i++) {
                var img = new Image();
                img.src = imgs[i];
                img.onload = function () {
                    $('.box').append(imgZoom(this, 200, 200));
                }
                $('.container').append('<div class="box"></div>');
            }
        });

        function imgZoom(img,w,h) {
            if(img.width>w){
                img.height=(img.height*w)/ img.width;
                img.width=w;
            }
            if(img.height>h){
                img.width=(img.width*h)/ img.height;
                img.height=h;
            }
            return img;
        }
    </script>
</head>
<body>
<div class="container"></div>
</body>
</html>

该示例代码中实现了对多张图片进行等比例缩放并显示在指定的区域内。通过循环加载多张图片，使用类似于示例1的代码实现对每张图片的缩放，并在容器中显示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript 指定区域内图片等比例缩放实现代码脚本之家整合版原创 - Python技术站