0

Experts, I have a page containing thumbnails: http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php My intention is to reduce the size of the thumbs to 50% for a small screen so that more of them fit on the screen. I already have a solution by JS but would like to use CSS instead. My latest approach uses scale: 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>

Scaling down works fine so far as Firebug indicates but there is a lot of space between the thumbnails so that the disired effect is not achieved. What causes this empty space? How can I remove it?

Ulrich Bangert
  • 81
  • 1
  • 11
  • Are you able to use bootstrap? The container columns will respond to the different sized screens and the items inside, if 100% of their parent, will scale down with them. – VictorySaber Apr 10 '15 at 08:38
  • This is not the first recommendation for Bootstrap but I would not like to learn the ropes of another framework. If CSS doesn't work I would keep my JS solution. – Ulrich Bangert Apr 10 '15 at 09:29
  • Bootstrap is incredibly simple, I promise you. Far simpler than writing the CSS yourself. Just download it, add a couple of classes to your DIV tags, et voila! – VictorySaber Apr 10 '15 at 09:50

1 Answers1

0

I would use a DIV as a container and then a DIV for each thumbnail, and scale the thumbnail DIVs down. If the images inside are 100% the size of the DIV then they will scale down with it. This will eliminate the spaces you are seeing at the moment.

VictorySaber
  • 3,084
  • 1
  • 27
  • 45
  • Tried this but it doesn't remove the empty spaces: http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen_test.php Additionally the layout is no longer line oriented. – Ulrich Bangert Apr 10 '15 at 09:30
  • In the meantime I found this thread: http://stackoverflow.com/questions/16385578/white-space-around-css3-scale When I read Martin Turjaks answer, it seems to me that there is no way to work around the empty spaces. – Ulrich Bangert Apr 10 '15 at 09:40