如何用jquery调整图片大小

我想调整一个img的点击功能。这是我目前无法使用的代码。我不确定我是否正确地做到了这一点，任何帮助都会很棒。如何用jquery调整图片大小

<script> 
$(document).ready(function(){ 
$("#viewLarge").click(
function(){ 
    $("#newsletter").width("950px"); 
}); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' width='630px' src='images/news/hello.jpg'>

来源

2010-05-31 Cool Guy Yo

初始宽度的IMG不应该属性包含除''％以外的单元 - 假定像素。 – prodigitalson 2010-05-31 19:32:51

在你的HTML源代码，不指定width="630"。相反，使用内联CSS来指定宽度，因为jQuery.width（）将操纵CSS宽度。另外，向jQuery.width()函数提供一个没有单位（％或px）的数字。

HTML

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id="newsletter" style="width: 630px" src='http://farm3.static.flickr.com/2475/4008724345_56506c8183_b.jpg'>

的JavaScript

$(document).ready(function() { 
    $("#viewLarge").click(function() { 
     $("#newsletter").width(950); 
    }); 
});

Demo

来源

2011-05-14 06:57:19

可能是因为您没有阻止链接的默认操作而重新加载页面。设置宽度后尝试添加return false;，以便不采用链接。你真的应该使用样式而不是宽度属性来重写它，尽管在测试中它似乎并不重要。使用下面的代码（但用我的图片替换你的图片）为我工作得很好。

<script> 
$(document).ready(function(){ 
$("#viewLarge").click( 
    function(){ 
     $("#newsletter").width("950px"); 
     return false; 
    }); 
}); 
</script> 
<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' src='images/news/hello.jpg' style="width: 630px;">

来源

2010-05-31 19:26:34 tvanfosson

嗯，这似乎并没有解决它，似乎还没有发生。 – 2010-05-31 19:48:55

@Anders - 你必须有其他问题。我完全复制了上面的代码（使用不同的IMG网址），它在FF和IE8中都能正常工作。使用Firefox/Firebug或IE8开发者工具来查看是否有任何javascript错误阻止点击处理程序被应用或工作。 – tvanfosson 2010-05-31 19:55:20

好的，我会试着找出这一个。 – 2010-05-31 20:15:24

嘿，安德斯。尝试使用像上面这个人谈论的萤火虫控制台。你必须先启用它，但它会捕获你的错误。您也可以使用内置于Firefox和其他大多数浏览器中的Ctrl + Shift + J来尝试错误控制台。

关于你的代码，这对我来说工作得很好。

<a id="viewLarge" class="prepend-7" href="#">View Larger(+)</a> 
<img id='newsletter' width='630' height='250' src='http://www.google.ca/intl/en_com/images/srpr/logo1w.png'> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
    $("#viewLarge").click(function(){ 
     $("#newsletter").css('width', '950px'); 
    }); 
}); 
</script>

来源

2010-05-31 22:09:52

Try This : jQuery image resize code(working with all browser) 

/* 
Here is Start Image Resize Code 
*/ 
function image_resize() { 
    $("your-class-or-id img").each(function() { 
      /* Max width for the image */ 
      var maxWidth = 230; 
      /* Max hieght for the image */ 
      var maxHeight = 230; 
      /*Used for aspect ratio*/ 
      var ratio = 0; 
      /*Current image width*/ 
      var width = $(this).width(); 
      /*Current image height */ 
      var height = $(this).height(); 

      /*Check if the current width is larger than the max*/ 
      if (width > maxWidth) { 
       /*get ratio for scaling image*/ 
       ratio = (maxWidth/width); 
       /* Set New hieght and width of Image*/ 
       $(this).attr({ 
         width : maxWidth, 
         height : (height * ratio), 
         alt : "your-alt-text-you-can-remove-this" 
        }); 
       /* Reset height to match scaled image */ 
       height = (height * ratio); 
       /* Reset width to match scaled image */ 
       width = (width * ratio); 
       /*Check if current height is larger than max*/ 
       if (height > maxHeight) { 
        /*get ratio for scaling image*/ 
        ratio = (maxHeight/height); 
        /*Set new height and width*/ 
        $(this).attr({ 
          height : maxHeight, 
          width : (width * ratio), 
          alt : "your-alt-text-you-can-remove-this" 
         }); 

       } 
      } 
     }); 
} 

/* 
Here is End Image Resize Code 
*/ 

/* 
How can we call this Function 
*/ 

/* Start $(document).ready function() */ 
$(document).ready(function() { 
     /* Call Function For image Resize (Not for Webkit Browser) */ 
     image_resize(); 
    }); 
/* End $(document).ready function(*/ 

/* Call Function (for Webkit Browser like safari and Chrome) */ 
$(window).load(function() { 
     image_resize(); 
    });

来源

2011-05-14 06:48:10

如何用jquery调整图片大小

回答

相关问题