圖像縮略圖大小與JSSor

我遇到了類似的問題，但不知道如何最好地實現答案張貼。我使用的是jssor插件，每個縮略圖的大小都不相同。我需要讓它們符合它們列出的尺寸，但是按照現在設置的方式，每個尺寸都設置爲72px x 72px。我已經嘗試將寬度和高度設置爲100％，但不確定究竟應該如何去做，因爲它並不真正起作用。我是否將此代碼添加到此代碼中或我缺少什麼？感謝您的幫助圖像縮略圖大小與JSSor

<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>

來源

2014-04-01 user3486160

請在這裏發表您的代碼 – jssor

不知道在哪裏張貼code.I看不到的地方 – user3486160

請更換

<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大小' 的屬性值，以滿足您的需求。

來源

2014-04-02 02:58:01 jssor

謝謝，但我沒有看到 user3486160

剛剛發佈了上面的實際代碼。對不起，其他帖子，我認爲這是需要改變的。謝謝 – user3486160

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

來源

2014-04-02 05:30:55 jssor

對不起，仍然不知道我在這裏替換了什麼 – user3486160

這是開發人員編寫的代碼，請開發人員爲您應用新代碼 – jssor

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

來源

2014-04-02 09:48:22 jssor

謝謝，但由於某種原因，每個縮略圖現在翻倍或製作兩個圖像在相同的圖像旁邊。圖像更大，這是我想要沒有扭曲，但他們不正確。 http://mirrorofrace.org/container1.php – user3486160

我認爲一個問題是許多這些圖像是垂直的，這可能是問題的原因。縮略圖通常是50 x 70的東西。 – user3486160

還有一個想法。如果寬度被稱爲$ row [「thumbnail_width」]和高度作爲$ row [「thumbnail_height」]，這可以工作我不知道如何使用這個與jssor腳本，但它在另一個PHP腳本中工作，似乎功能那裏。我試過在這裏寫這個PHP，但沒有運氣讓它工作。我知道我做錯了什麼，但似乎無法弄清楚。感謝任何其他幫助。舊網站似乎可以管理這個：http://mirrorofrace.org/container.php但我想使用jssor滑塊，它比我們使用的舊iframe好得多。謝謝 – user3486160

請添加背景重複：不重複; background-position：center center;如下，

<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-02 22:53:01 jssor

完美。謝謝，這很好。還有一個問題，請問如何縮小縮略圖中圖像之間的空間？感謝你的幫助，我真的很感激。 – user3486160

請參閱javascript代碼 – jssor

中的'$ SpacingX：10'，您可以調整'$ SpacingX'的值' – jssor

圖像縮略圖大小與JSSor

回答

相關問題