为灯箱图像创建缩略图

问题描述：

不能为我的生活让我的图像缩略图。页面是：为灯箱图像创建缩略图

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%;}'

答

你申请25px的整个DIV，而不是图像本身。

给该组中的每个图像需要的类别，如：

class="mythumbs"

然后添加CSS

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

然后你可以删除你的CSS的#kidswehelp_images

的图像都具有相同的'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

为灯箱图像创建缩略图

相关推荐