CSS: thumbnail responsive in stile polaroid

Short link

Creare immagini responsive con i CSS è una pratica ormai nota. Ecco un interessante studio sulla creazione di thumbnail in stile polaroid.

Dobbiamo solo definire dimensioni fluide nei nostri valori:


figure {
    margin: 1em;
    padding: 0;
    background: #f6f6f6;
    border: 1px solid #eee;
    width: 30%; /* larghezza fluida */
    box-shadow: 2px 2px 1px #ccc;
    border-radius: 6px;
}

figure img {
    display: block;
    max-width: 90%; /* larghezza massima fluida */
    max-height: 150px; /* altezza fissa per preservare le proporzioni */
    margin: 6% auto 0 auto; /* margini fluidi */
}

figcaption {
    padding: 4px 0;
    text-align: center;
    font-style: italic;
    font-size: 85%;
    color: #666;
    margin: 0;
    line-height: 1;
    display: block;
}
​

Ecco come la nostra thumbnail appare a 768 e 1024 pixel di risoluzione:

La thumbnail a 768 pixel.

La thumbnail a 1024 pixel.