zoukankan      html  css  js  c++  java
  • Js动态设置Img大小

        function ResizePic() {
            $('img').each(function () {
                var maxWidth = 450; // 图片最大宽度
                var maxHeight = 750;    // 图片最大高度
                var ratio = 0;  // 缩放比例
                var width = $(this).width();    // 图片实际宽度
                var height = $(this).height();  // 图片实际高度

                // 检查图片是否超宽
                if (width > maxWidth) {
                    //计算缩放比例
                    ratio = maxWidth / width;
                    $(this).css("width", maxWidth); // 设定实际显示宽度
                    height = height * ratio;    // 计算等比例缩放后的高度
                    $(this).css("height", height);  // 设定等比例缩放后的高度
                }

                // 检查图片是否超高
                if (height > maxHeight) {
                    ratio = maxHeight / height;
                    $(this).css("height", maxHeight);   // 设定实际显示高度
                    width = width * ratio;    // 计算等比例缩放后的高度
                    $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
                }
            });

        }

  • 相关阅读:
    设计模式-适配器模式
    设计模式-模板方法模式
    设计模式-策略模式
    spring-消息
    spring-集成redis
    spring-mvc高级技术
    spring-AOP
    restful规范
    十一,装饰器详解
    十,函数对象,嵌套,名称空间与作用域,闭包函数
  • 原文地址:https://www.cnblogs.com/leon719/p/3977940.html
Copyright © 2011-2022 走看看