Images not Cropped to correct size

Question

This jquery script can crop any image to correct size by tweaking the image url. This is the only Jquery script in web i have found for crop image of specific div/elements. Problem is suddenly the script is not able to crop image to correct size, the script's width-height variable is var w = 200 and var h = 150 but problem is width variable is not working, cropped images height and width became the same size. Means only height variable works, output cropped image became 150px X 150px. It should 200px X 150px.

JS:

var w = 200;
var h = 150;
$('.crop').find('img').each(function(n, image){
  var image = $(image);
  image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
  image.attr('width',w);
  image.attr('height',h);
 });

Problem Fiddle >
NOTE: I'm using Latest chrome and it's not working, Version 43.0.2357.130 and also not work in latest Firefox. And please see the original size using Inspect element [Shift+Ctrl+I] or download the cropped image.

I have not able to find any reason/problem why Images not Crop to correct size? and what is the solution? please help :(
Thanks in advance.

Answer 1

I found that topic, and make some test,

then I find out that s200-h150-c seems weird

So I replace

image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});

to

image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c')});

With s200-h150-c become w200-h150-c, and it works. Not sure there's typo on origin post or the function changed.

var w = 200;
var h = 150;
$('.crop').find('img').each(function(n, image){
  var image = $(image);
  image.attr('src' , image.attr('src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c'));
  image.attr('width',w);
  image.attr('height',h);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Please save the croped Image for see the actual result.
<br/><br/>
1) After Crop (Result: 150px X 150px ) 
<br><br>
<div class="crop">
<img src="http://1.bp.blogspot.com/-R7XPICyjSZA/VRaUCQteV1I/AAAAAAAABLc/PSsERo55dIg/s1600/artworks-000103151765-uxzfpd-t500x500.jpg"/>
</div>
<br/><br/>
2) After Crop (Result: 150px X 150px )
<br/><br/>
<div class="crop">
<img src="http://4.bp.blogspot.com/-YTDvE4-4L0o/VIkaNloCRCI/AAAAAAAAAu0/8Q0MkvJyGZE/s1600/pc-type65756.jpg"/>
</div>
<br/>

Answer 2

You're using curly braces { } inside the attr method which is not allowed to use because attr doesn't accept object {} as a parameter.

So, you can change to:

image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});

With this:

image.attr('src' , image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c'));

---

But better solution would be using like this:

image.attr('src' , function(i,v){
   return v.replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c'));
});

---

And you can use css for setting width and height like this:

image.css({'width':w,'height':h});