1

我遇到了一个类似的问题，但不确定如何最好地实施发布的答案。我正在使用 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"../gallery/profile.php?photo_id={$row['photo_id']}\">Info Page</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$row['figure_1']}</span> </div>"; } ?> </div>

4

4 回答 4

0

请更换

<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”的属性值以满足您的需求。

于 2014-04-02T02:58:01.207 回答
0 
<div u=\"thumb\">
    <div style=\"width: 100%; height: 100%; background-image: url(http://mirrorofrace.org/{$row['thumbnail']}); background-size: contain;\"></div>
</div>
于 2014-04-02T09:48:22.070 回答
0

请添加背景重复：不重复；背景位置：中心中心；如下，

<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>
于 2014-04-02T22:53:01.653 回答
0 
<img u=\"thumb\" src=\"http://mirrorofrace.org/{$row['thumbnail']}\"  alt=\"\" style=\"border: 0\">
于 2014-04-02T05:30:55.660 回答