使用jQuery和没有服务器端代码调整裁剪后的图像

Question

我正在使用一些jQuery来搜索Flickr，产生一组缩略图，选择一个缩略图，加载全尺寸图像，然后通过将图像设置为DIV的背景图像。包含图像最后genrated 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

这听起来像你应该开始思考一个<canvas>的解决方案，如Pixastic。如果你真的不能从jQuery kool-aid中解脱出来，你可以使用use it as a plugin。

Cropping example。

Answer 2

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

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

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