css - 通过媒体查询缩小图像不起作用

Question

专家们， 我有一个包含缩略图的页面: http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php 我的目的是为小屏幕将拇指的大小减小到 50%，以便更多的拇指适合屏幕。我已经有了 JS 的解决方案，但想改用 CSS。我最新的方法使用规模: CSS:

@media only screen and (max-width: 768px) {
a.th200 {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
    display: inline-block;   
}
}

HTML:

<a href="2015-04-05_Bad_Harzburg_Oldtimertreffen_01.jpg" class="ilightbox th200"><img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg"></a>

就 Firebug 指示而言，按比例缩小工作正常，但缩略图之间有很多空间，因此无法达到预期的效果。是什么导致了这个空白空间？我怎样才能删除它？

Answer 1

我会使用一个 DIV 作为容器，然后为每个缩略图使用一个 DIV，然后缩小缩略图 DIV。如果里面的图像是 DIV 大小的 100%，那么它们将随之缩小。这将消除您目前看到的空间。