JSSOR 的缩略图大小（jQuery 插件）答案

【问题标题】：Thumbnail image size for JSSOR (jQuery Plugin)JSSOR 的缩略图大小（jQuery 插件）
【发布时间】：2014-04-26 05:49:52
【问题描述】：

我正在使用来自http://www.jssor.com/ 的 jQuery 图像滑块插件。现在，插件需要滑块中缩略图的宽度和高度。

我想知道我可以为每个图像设置不同的缩略图图像大小，因为我有图像不同的尺寸，固定的宽高会改变图像的比例。

<div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 100px; HEIGHT: 50px; TOP: 0; LEFT: 0;">
                <div class="o" style="position:absolute;top:1px;left:1px;width:100px;height:50px;overflow:hidden;">
                    <ThumbnailTemplate class="b" style="width:100px;height:50px; border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate>
                    <div class="i"></div>
                    <ThumbnailTemplate class="f" style="width:100px;height:50px;border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate>
                </div>
            </div>
</div>

【问题讨论】：

标签： jquery jquery-plugins slider image-scaling

【解决方案1】：

请更换

<div>
    <img u="image" src="../img/alila/01.jpg" />
    <img u="thumb" src="../img/alila/thumb-01.jpg" />
</div>

与

<div>
    <img u="image" src="../img/alila/01.jpg" />
    <div u="thumb">
        <div style="width: 100%; height: 100%; background-image: url(../img/alila/thumb-01.jpg); background-position: center center; background-repeat: no-repeat; ">
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

根据jssor的回答在第三个div的样式中添加background-size: cover;或background-size: contain;可以改变比例。这意味着：

<div>
 <img u="image" src="../img/alila/01.jpg" />
 <div u="thumb">
    <div style="width: 100%; height: 100%; background-image: url(../img/alila/thumb-01.jpg); background-position: center center; background-repeat: no-repeat; ">
 </div>
</div>

【讨论】：