jQuery NailThumb高分辨率缩略图显示插件

jQuery NailThumb 可让你轻松创建高分辨率图像的无损缩略图，只需一行代码搞定。你可以通过 CSS 来设定缩略图的尺寸，jQuery NailThumb并不是真正的裁切了图片，只是将图片适当的缩放，定位到不同的位置，所以如果图片很大，还是要使用后台编程语言把图片裁切生成缩略图。

特点

简单易用，一行代码即可完成
完全使用CSS控制缩略图的尺寸和定位位置
由于只是缩放了图片，所以可以保留图片的高分辨率。
可以自定义图片的缩放比例，裁切图片定位到不同的位置
适用于

基本上任何媒体画廊

但假如你想在你的网络应用程序中使用的头像：这个插件可以避免建立一个使你的用户加载正确的高度和宽度的头像功能，你仍然能漂亮地摆放在你的布局需要大小/尺寸。最重要的是，当你想不需要你的用户上传一个新的，甚至是管理不同的大小/比的头像选择不同的布局，没有缺点的所有的所有的所有的都可以改变。

不适用于

这个插件不会帮助你提供非常大的高清晰度图像更容易。如果你有非常大的图像，希望有较低的大小缩略图，你仍然会有批量调整过的手。世上本没有路可以做客户端通过JavaScript。

然而这个插件，你就必须调整到一个更高的带宽友好的维度，你不需要作物/调整到任何特定的纵横比，最重要的是你能改变的，只要你想，然后通过CSS形状。

使用方法

基本上你需要的每一个缩略图是一个容器和一个方法来设置你的缩略图宽度和高度。最好的办法是通过CSS（看这个例子），所以当你想换个你不需要触摸你的JavaScript让缩略图适合。

导入jQuery类库，插件js和css，如下：

编写一些图片和DIV标签

   

   

   

编写用于显示缩略图的CSS

.square-thumb {
   
   
}

调用插件方法，如下：

jQuery(document).ready(function() {
    jQuery('.nailthumb-container').nailthumb();
});

使用图片的容器元素即可生成缩略图。

可选参数

所有选项可以直接在插件调用或通过元数据指定。如果您需要更改任何默认的选项，所以你不必为每个调用nailthumb可以使用指定$.fn.nailthumb.defaults