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％，那么它们将随之缩小。这将消除您目前看到的空间。

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

1 个答案: