教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js动态获取图片width与height 等比例缩放的代码

js动态获取图片width与height 等比例缩放的代码

发布时间:2015-01-23   编辑:jiaochengji.com
本文介绍下,使用javascript代码动态计算图片的宽度与高度,进而实现等比例绽放的一段代码,有需要的朋友,可以参考下。

用js实现图片的等比缩放还是很方便的,重点在于获取图片的width与height数值,才好进行下一步操作。
这里分享一段js动态计算图片宽度与高度的代码,如下:

// 图片 width 和 height 自动计算的函数
    function DrawImage(ImgD, FitWidth, FitHeight) {
        var image = new Image();
        image.src = ImgD.src;
        if (image.width > 0 && image.height > 0) {
            if (image.width / image.height >= FitWidth / FitHeight) {
                if (image.width > FitWidth) {
                    ImgD.width = FitWidth;
                    ImgD.height = (image.height * FitWidth) / image.width;
                } else {
                    ImgD.width = image.width;
                    ImgD.height = image.height;
                }
            } else {
                if (image.height > FitHeight) {
                    ImgD.height = FitHeight;
                    ImgD.width = (image.width * FitHeight) / image.height;
                } else {
                    ImgD.width = image.width;
                    ImgD.height = image.height;
                }
            }
        }
    }
    // 开始执行 
    jquery(window).load(function () {
        jQuery("li.item img").each(function () {
            DrawImage(this, 800, 600);
});
});

您可能感兴趣的文章:
js动态获取图片width与height 等比例缩放的代码
jQuery动态改变图片显示大小(示例代码)
php等比例缩放图片的示例参考
js等比例缩放图片的实现方法
Jquery 动态实现图片缩略的代码
jQuery动态改变图片显示大小(修改版)的实现思路及代码
js 实现图片等比例缩放实例
jQuery图片预加载 等比缩放实现代码
等比例缩小图片尺寸的js代码
php与js对数据库图片等比缩放的代码

[关闭]
~ ~