1

我需要根据幻灯片生成一些拇指。这个拇指是从每张幻灯片的 img src 直接/动态生成的。

现在我正在为拇指库生成这样的代码：

<ul id="galThumb">
<li id="thumb0"><img src="path-to-image" title="Image[0]"></li>
<li id="thumb1"><img src="path-to-image" title="Image[1]"></li>
<li id="thumb2"><img src="path-to-image" title="Image[2]"></li>
...
<li id="thumbn"><img src="path-to-image" title="Image[n]"></li>
</ul>

li 元素保持浮动以与它们形成水平线。

我的问题是用户可以上传任何图像大小和方向的图像，而我无法正确控制拇指的方向。我需要所有的拇指都有特定的大小。例如，60x45 像素。

当用户上传垂直图像或具有不同比例的任何其他图像时，我有一条不规则的拇指线，其中垂直图像占据宽度并且较大的图像高于其他图像。如何在不裁剪图像的情况下获得相等的高度和宽度的拇指？或者只是裁剪一下以适应垂直方向？

我在这里搜索了很多，发现了一些有用的脚本，但没有一个能达到这个目标。

4

4 回答 4

1

我喜欢jQuery NailThumb。它非常可定制且易于使用。

于 2012-05-21T18:59:19.027 回答
0

You could assign the images as backgrounds, then use CCS3 background-size: cover to make it fill the thumbs perfectly. Then use an IE filter for backwards compatibility.

This article explains it best: http://css-tricks.com/perfect-full-page-background-image/

This would not require any JavaScript.

于 2012-05-21T15:42:16.940 回答
0

您可以使用 jQuery 指定每个图像的宽度/高度。循环遍历<li>元素，获取每个图像的纵横比，为每个图像设置相同的高度，并根据纵横比设置 with。

于 2012-05-21T15:39:33.537 回答
0

试试我在这里提到的这个简单的功能：https ://stackoverflow.com/a/14731922/382536

/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth Source area width
* @param {Number} srcHeight Source area height
* @param {Number} maxWidth Fittable area maximum available width
* @param {Number} maxHeight Fittable area maximum available height
* @return {Object} { width, heigth }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}
于 2014-04-22T00:44:00.050 回答