javascript - 图像未裁剪为正确尺寸

Question

这个 jquery 脚本可以通过调整图像 url 将任何图像裁剪为正确的大小。这是我在网络中找到的唯一一个用于裁剪特定 div/元素的图像的 Jquery 脚本。问题是脚本突然无法将图像裁剪为正确的尺寸，脚本的宽度-高度变量为 var w = 200 和 var h = 150 但问题是 width 变量不起作用，裁剪后的图像高度和宽度变为相同大小。意味着仅高度变量有效，输出裁剪图像变为 150px X 150px。 它应该是 200 像素 X 150 像素。

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);
 });

问题Fiddle >
注意:我使用的是最新的 chrome，但它无法工作，版本 43.0.2357.130 也无法在最新的 Firefox 中工作。请使用检查元素 [Shift+Ctrl+I] 查看原始尺寸或下载裁剪后的图像。

我找不到任何原因/问题为什么图像不能裁剪到正确的尺寸？解决办法是什么？请帮忙 :(
提前致谢。

Answer 1

我发现topic ，并进行一些测试，

然后我发现s200-h150-c看起来很奇怪

所以我替换

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

到

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

使用s200-h150-c变成w200-h150-c，并且它可以工作。不确定原始帖子是否有拼写错误或功能已更改。

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/>