Question

我遇到了类似的问题，但不确定如何最好地实施所发布的答案。我使用的是jssor插件，每个缩略图的大小各不相同。我需要让它们符合它们列出的尺寸，但是按照设置的方式，现在每个都设置为72px x 72px。我已经尝试将宽度和高度设置为100％，但不确定应该去哪里，因为它不能正常工作。我是否将此添加到此代码中或者我缺少什么？谢谢你的帮助

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

这是实际的代码。我找到了信息，但不确定它在这里是如何工作的。我使用的是PHP脚本，但我发现它有点复杂。谢谢： foreach ($result as $row) { echo "<div> <p><small><span style=\"color:white\">To explore images click on smaller image below to start.</span></small></p> <a href=\"http://mirrorofrace.org/TemplateZoom.php?photo_id={$row['photo_id']}\" target=\"_blank\"><img u=\"image\" src=\"http://mirrorofrace.org/{$row['full_size']}\" alt=\"\" ></a> <img u=\"thumb\" src=\"http://mirrorofrace.org/{$row['thumbnail']}\" alt=\"\" style=\"border: 0\"> <br><span style=\"color:white\">Click Image to Zoom     <a href=\"../gallery/profile.php?photo_id={$row['photo_id']}\">Info Page</a>     {$row['figure_1']}</span> </div>"; } ?> </div>

Answer 1

请替换

<img u="thumb" src="../img/landscape/thumb-01.jpg" />

与

<div u="thumb">
    <div style="width: 100%; height: 100%; background-image: url(../img/landscape/thumb-01.jpg); background-size: contain;"></div>
</div>

您可以更改'backgorund-size'的属性值以满足您的需求。

Answer 2

<img u=\"thumb\" src=\"http://mirrorofrace.org/{$row['thumbnail']}\"  alt=\"\" style=\"border: 0\">

Answer 3

<div u=\"thumb\">
    <div style=\"width: 100%; height: 100%; background-image: url(http://mirrorofrace.org/{$row['thumbnail']}); background-size: contain;\"></div>
</div>

Answer 4

请添加background-repeat：no-repeat;背景位置：中心;如下，

<div u=\"thumb\">
    <div style=\"width: 100%; height: 100%; background-image: url(http://mirrorofrace.org/{$row['thumbnail']}); background-size: contain; background-repeat: no-repeat; background-position: center center;\"></div>
</div>

使用JSSor缩小图像缩略图

4 个答案: