javascript - Images not Cropped to correct size -


this jquery script can crop image correct size tweaking image url. jquery script in web have found crop image of specific div/elements. problem script not able crop image correct size, script's width-height variable var w = 200 , var h = 150 problem width variable not working, cropped images height , width became same size. means 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 , it's not working, version 43.0.2357.130 , not work in latest firefox. , please see original size using inspect element [shift+ctrl+i] or download cropped image.

i have not able find reason/problem why images not crop correct size? , solution? please :(
thanks in advance.

i found topic, , make test,

then find out s200-h150-c seems weird

so 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, , works. not sure there's typo on origin post or 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 croped image see 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/>


Comments