Ridimensionamento/adattamento Oggetti/immagini HTML (+CSS)

[luca_061088]

Buonasera

Spero innanzi tutto di scrivere nella sezione giusta, in caso contrario spostate pure il messaggio nella corretta sezione

Vi spiego subito qual'è il problema
Nel mio forum, (parliamo di un forum forumfree) ho inserito una tabella in homepage, e fin qui tutto bene
Sotto alla tabella ho inserito 8 immagini rettangolati 530x220 con

<a href="link"><img src="link img"></a>

e fin qui tutto bene

queste immagini sono legate a uno stile CSS che praticamente quando passo il mouse sopra si scalano a 289x120 ( e fin qui tutto bene)

Il problema è il seguente
Fin che io tengo la finestra di qualunque broswer a schermo intero tutto bene, le immagini sono in fila

quando magari la tengo più piccola, l'ultima va a capo, quando invece il resto del forum si ridimensione più piccolo per sistemarsi con la dimensione della finestra (non della risoluzione dello schermo !attenzione)

per farvi un esempio visivo:

finestra ingrandita (schermo intero per intenderci, a prescindere dalla risoluzione dello schermo)
Senza-titolo-2.jpg

finestra tenuta piccola (non a schermo intero, per essere chiari, un rettangolo in mezzo allo schermo)

Senza-titolo-3.jpg

come potete notare quella fila di immagini non si va a scalare e rimpicciolire assieme alla barra del forum e alla tabella sopra, ma rimangono con le loro dimensioni.

per evitare che andasse a capo l'ultima ho dovuto rimpicciolirle tutte di dimensioni di modo che ci stessere

ma io vorri che si scalassero come il forum tutte assieme di modo che si vedano in fila a prescindere da come tengo la finestra del broswer.

Vi posto anche il codice HTML e CSS:

<div class="pagination"> 
 
<!-- SMASH BROS --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=69328905" target="_blank"><img class="fit" src="http://i.imgur.com/P27d9qu.png"></a> 
 
<!-- DEVIL'S THIRD --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=70128145" target="_blank"><img class="fit" src="http://i.imgur.com/FyHDRnf.png"></a> 
 
 
<!-- MARIO KART 8 --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=68360575" target="_blank"><img class="fit" src="http://i.imgur.com/9G2DuQF.png""></a> 
 
 
<!-- MONSTER HUNTER 3 ULTIMATE --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=65603487" target="_blank"><img class="fit" src="http://i.imgur.com/Hd7pUOH.png"></a> 
 
 
<!-- SPLATOON --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=69788286" target="_blank"><img class="fit" src="http://i.imgur.com/Co3YrVS.png"></a> 
 
 
<!-- ZELDA WIIU --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=70127349" target="_blank"><img class="fit" src="http://i.imgur.com/H9k8HcR.png"></a> 
 
 
<!-- CAPTAIN TOAD --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=70127005" target="_blank"><img class="fit" src="http://i.imgur.com/Yz3s69Z.png"></a> 
 
<!-- XENOBLADE CHRONICLES --> 
 
<a class="shrink pic" href="http://iteamcod.forumfree.it/?t=70051411" target="_blank"><img class="fit" src="http://i.imgur.com/IRsx5yS.png"></a> 
 
</div> 
<br>

Codice CSS per il <div> per centrarle in quanto il codice CSS delle imamgini contiene un "float"

 .pagination {display: table;
 margin: 0 auto}

Codice CSS per le immagini

* {-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box}

body {background: #333}

.pic {float: left;
height: 289px;
 width: 120px;
 overflow: hidden}


/*SHRINK*/
.shrink img {height: 530px;
 width: 220px;

 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease}

.shrink img:hover {width: 120px;
 height: 289px}

PS. anche togliendo il class="fit" alle immagini non cambia il discorso

Scusate il papiro ma ho voluto essere chiaro da subito

Un Saluto e un ringraziamento
Luca