Questa è la traduzione dell'articolo 3 Easy and Fast CSS Techniques for Faux Image Cropping di Alen Grakalic pubblicato originariamente su CSS Globe il 7 Settembre 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Questo articolo presenta la sintesi di tre tecniche facili e veloci che consentono di mostrare solo una porzione di un'immagine nel contesto dei vostri contenuti. Tutte le tecniche possono essere implementate con poche righe di CSS. Tuttavia, non si tratta di cropping nel senso vero della parola, non si taglia un'immagine a certe dimensioni (con i CSS non si può fare). Semplicemente nascondiamo la parte che non ci serve dell'immagine per mostrare solo quella che ci interessa.
Ecco perché preferisco parlare di falso cropping di immagini. Queste tecniche possono essere molto utili se avete bisogno di mantenere un'immagine a dimensioni fisse o prefissate (per esempio per le classiche miniature). Usare solo i CSS per ottenere questo risultato e scegliere quale porzione dell'immagine mostrare può essere un grande bonus in certe circostanze.
Tecnica 1 - Usare i margini negativi
Con questa tecnica l'immagine ha bisogno di essere posizionata all'interno di un elemento parente, nel nostro caso un paragrafo. Il paragrafo deve essere un elemento float (o impostato ad una certa dimensione in larghezza tramite width). Questa tecnica non funziona su elementi blocco a larghezza piena.
Impostiamo i margini negativi per tutti i quattro lati: top, right, bottom e left. I margini negativi definiscono come e quanto l'immagine sarà portata in ciascuna direzione lasciando solo una parte all'interno dell'elemento parente. Quando impostiamo la proprietà overflow per l'elemento parente sul valore hidden, nascondiamo l'area che è esterna all'elemento parent e otteniamo il risultato desiderato. Per ottenere in maniera precisa l'effetto desiderato sarà necessario giocare un po' con i valori dei margini.
Questo il codice HTML:
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>E questo il codice CSS:
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img{
margin:-20px -15px -40px -55px;
}Potete vedere tutto in azione in questa demo.
Tecnica 2- Usare il posizionamento assoluto
Se non ve la sentite di usare i margini negativi, vi suggerisco di usare questa tecnica. In questo caso ci appoggeremo ad un elemento parente (ancora un paragrafo) per cui impostiamo una larghezza (width) e un'altezza (height) specifiche. La proprietà position del paragrafo viene impostata su relative. width e height definiscono la dimensione dell'area dell'immagine da mostrare. L'immagine inserita nel paragrafo ha absolute come valore di position. Possiamo poi posizionarla usando le proprietà top e left, e facendo cos' scegliamo quale porzione dell'immagine mostrare.
L'HTML è identico a quello visto in precedenza:
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p>Questo il codice CSS:
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:150px;
height:90px;
}
.crop img{
position:absolute;
top:-20px;
left:-55px;
}Ecco la demo.
Tecnica 3 - Usare la proprietà clip
Questa tecnica dovrebbe essere la più semplice dal momento che la proprietà clip definisce la porzione di un elemento che dovrebbe essere visibile. Sembrerebbe una soluzione perfetta, ma c'è un problema: l'elemento a cui si applica la proprietà deve essere posizionato assolutamente. Per mantenere l'elemento nel flusso del documento dovremo aggiungere un altro elemento, calcolare la dimensione dell'area visibile dell'immagine, aggiungere quella dimensione all'elemento parente, rendere float quest'ultimo... Molto lavoro, che ne dite?
Ah, c'è un altro problema: la dimensione dell'elemento a cui applichiamo la proprietà clip non viene ridotta alla dimensione del crop, mantiene la dimensione originale. Dovremo così usare il posizionamento assoluto per spostare l'area visibile all'angolo superiore sinistro dell'elemento parente.
Tuttavia la proprietà clip va comunque menzionata, per cui ecco il codice.
HTML:
<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>CSS:
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px);
}Ed ecco la demo.
Conclusioni
Se osservate attentamente gli esempi uno ad uno noterete che sembrano uguali. Ciò prova ancora una volta che ci sono molti modo per ottenere lo stesso risultato con i CSS. Se mi chiedete un'opinione, io userei la prima tecnica, quella dei margini negativi. È quella più veloce e facile; modificando qualcosa non dovrete cambiare i valori dell'elemento parent: cambierete solo i margini negativi e l'elemento parente si adatterà automaticamente.
