Circa due anni fa ho dovuto realizzare un demo di una galleria di immagini per un sito di cui dovevo realizzare il layout. Il progetto non andò in porto ma la galleria di immagini di esempio risultò rispondente ai requisiti richiesti. Si tratta di una galleria di immagini con i CSS in cui i vari box sono disposti in modo asimmetrico tramite il floating. L'impaginazione è basata a sua volta su colonne flottate. Il dato interessante della galleria è che pur avendo misure fisse per il contenitore e i box principali, permette di inserire le immagini a qualsiasi risoluzione. Come è possibile?
Semplicemente, le immagini sono trasformate in elementi di blocco e hanno sempre dimensioni espresse in percentuale. La percentuale è calcolata rispetto al loro box contenitore. Quindi non è importante che l'immagine originale sia molto più grande del box contenitore: essa si adatterà sempre al box che la contiene. Quindi:
#box {
width: 200px;
height: 150px;
}
#box img {
width: 100%;
height: 100%;
display: block;
}
Anche se l'immagine è di 400 x 300 pixel o superiore, sarà sempre dimensionata come vogliamo noi grazie alle percentuali. Potete visualizzare il demo in questa pagina.