如何用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調整圖片大小

回答

相關問題