使用jQuery调整裁剪图像的大小，没有服务器端代码

Question

我正在使用一些jquery来搜索Flickr，生成一组缩略图，选择缩略图，加载全尺寸图像，然后通过将其设置为DIV的背景图像来裁剪图像。包含图像的最终生成DIV的示例如下：

<div class="imgwrapper2" style="background-image: url(&quot;http://farm6.static.flickr.com/5094/5425332847_2c4ab1a53a.jpg&quot;); width: 257px; height: 271px; background-position: -69px -77px;">
  &nbsp;
</div>

我现在想看看调整图像大小，调整包含背景图像和拉伸背景图像的DIV的大小。

使用上面的HTML和jQuery可以实现吗？如果是这样，任何人都可以建议任何可能有帮助的jQuery插件吗？

如果你不认为使用上面的输出是可能的，如果div包装溢出设置为不可见的IMG标签可能会更容易吗？

Answer 1

我相信你正在寻找CSS标签背景大小

<div style="background : url(purple.gif) no-repeat; background-size: 100%;">

http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

Answer 2

听起来你应该开始考虑<canvas>解决方案，例如Pixastic。如果你真的无法摆脱jQuery kool-aid，你可以use it as a plugin。

Cropping example