jQuery动态改变图片显示大小(修改版)

$(document).ready(function() {
     $(‘.post img‘).each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100;    // 图片最大高度
     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);    // 设定等比例缩放后的高度
     }
 });
 });
故修改代码如下:

jQuery(window).load(function () {
            jQuery("div.product_info img").each(function () {
                DrawImage(this, 680, 1000);
            });
        });
        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;
                    }
                }
            }
        }  
时间: 2024-08-08 10:28:57

jQuery动态改变图片显示大小(修改版)的相关文章

img超出div width时, jQuery动态改变图片显示大小

参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archive/2012/02/23/2364292.html

jquery动态改变图片

动态改变图片: var bb = 1;var aa=4; $("div[page='" + bb + "'] dd").eq(aa).children("img").attr("src", "images/zy_033.jpg") <div class="Pc4_con_list1" page="1"> <dl class="Pc4_dl1

android &nbsp; 动态改变图片大小

在oncreate中,使用getheight等函数不能获得控件大小,得到的为0 应使用其他方法 Resources res = getResources(); final ImageView view=(ImageView)findViewById(R.id.IV_about); final Drawable drawable=res.getDrawable(R.drawable.ic_about); DisplayMetrics dm = new DisplayMetrics(); getWi

jquery动态改变背景颜色插件

GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> <style> div { background-color: #bada55; width: 100px; border: 1px solid green; } </style> <script src="http://code.jquery.com/jquery-1

FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; margin: 1em; } 当然简单如下的html是不能限制图片大小的 <div class=“picture-area”> <img src=“…” alt=“…”> </div> 换个思路,将图片作为div的背景图片 <div style=“background-ima

Java改变图片的大小

前面在做项目的时候,有一个需求是需要上传图片的,然而该图片只是简单的展示一些信息,不需要很大,所以在上传图片的时候改变图片的大小就显得很有必要了!然后就写了下面这个方法来改变图片的大小! Java代码  /** * 改变图片的大小到宽为size,然后高随着宽等比例变化 * @param is 上传的图片的输入流 * @param os 改变了图片的大小后,把图片的流输出到目标OutputStream * @param size 新图片的宽 * @param format 新图片的格式 * @th

js动态改变图片src在ie6下的兼容问题

场景:验证码图片在ie6下出不来 这个BUG折腾了我近半个小时,最后GOOGLE成功,原因是IE6的底层BUG,我们使用<a>的href属性改变的时候会中断加载,导致我们看不到图片,这经常在验证码或动态改变图片的时候遇到. 所以我们在使用a 链接时通常href和onclick都会同时用到,链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,o

S实现控制图片显示大小的方法【图片等比例缩放功能】

S实现控制图片显示大小的方法[图片等比例缩放功能] [需求]:读取磁盘中的图片,展示在弹出框中,等比例缩放图片,使图片显示完全. (读取磁盘中的图片展示在前台,请参照我的另一篇文章:) [开发]: 调用说明: 直接调用js函数即可. 我测试是一个image 标签中直接调用,如下: <div> <img id="showImageimg"  src="/sirdifoa/applycorrection/getImage.do?imgName=2017001.j

分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小

原文:分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小 /** * Reallocates an array with a new size, and copies the contents * * of the old array to the new array. * * @param oldArray the old array, to be reallocated. * * @param newSize the new array size. * * @return