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:
