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

为灯箱图像创建缩略图

1 个答案: