为Lightbox图像创建缩略图

Question

不能为我的生命而成为缩略图。页面是：

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

Answer 1

您将25px应用于整个DIV，而不是图像本身。

给该组中的每个图像类似：

class="mythumbs"

然后添加CSS

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

然后，您可以删除#kidswehelp_images