爲燈箱圖像創建縮略圖

不能爲我的生活讓我的圖像縮略圖。頁面是：爲燈箱圖像創建縮略圖

www.aliceskids.org/kidswehelp2.html

我把它叫：

#kidswehelp_images { 
position: relative; 
float: left; 
width: 25px; 
height: 25px; 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-size:  cover;}

只是想獲得的圖像的大小一樣的，所以這是一個很大整潔。

[http://www.aliceskids.org/kidswehelp2.html]

<a href="../images/thankyounotes/girl_clothing.jpg" data-lightbox="kidswehelp" data-title=""><img id="clothing" src="../images/thankyounotes/girl_clothing.jpg" class="myThumbs"></a> 

    <a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="myThumbs"></a> 

    <a href="../images/thankyounotes/soccer_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="soccer" src="../images/thankyounotes/soccer_equipment.jpg" class="myThumb"></a> 

    <a href="../images/thankyounotes/maxx_clothing.jpg" data-lightbox="kidswehelp" data-title=""><img id="maxx" src="../images/thankyounotes/maxx_clothing.jpg" class="myThumb"></a> 

    <a href="../images/thankyounotes/new_shoes.jpg" data-lightbox="kidswehelp" data-title=""><img id="newshoes" src="../images/thankyounotes/new_shoes.jpg" class="myThumb"></a>'

這對圖像。

這是樣式表：

'.myThumbs { 
float: left; 
margin-right: 1%; 
margin-bottom: 0.5em; 
width: 50%; 
height: 50%;}'

來源

2017-04-21 Mark LoProto

你申請25px的整個DIV，而不是圖像本身。

給該組中的每個圖像需要的類別，如：

class="mythumbs"

然後添加CSS

.myThumbs { 
width: 25px; 
height: 25px; 
}

然後你可以刪除你的CSS的#kidswehelp_images

來源

2017-04-21 19:30:07 Simon

的圖像都具有相同的'ID = 「謝謝」'。你需要給他們每個唯一的ID或使用上面建議的類，並刪除重複的ID。具有相同類的多個項目很好，但不是相同的ID。每個ID都必須是唯一的。 – Macsupport

我似乎無法讓它調用myThumbs類。我甚至在它沒有提到它之前，就把所有從「style」字符串到CSS的東西都清理乾淨了。 '.mythumbs { \t float：left; \t margin-right：1％; \t margin-bottom：0.5em; \t寬度：50％; \t高度：50％;}' 這是該圖片的HTML： '' –

@馬克你設法得到它到底工作？ – Simon

爲燈箱圖像創建縮略圖

回答

相關問題