Ritagliare e centrare le immagini con css

In questo breve articolo vediamo come ottenere le miniature delle immagini, utilizzando le proprietà CSS3.
La tecnica che andremo ad utilizzare è compatibile con tutti i browser moderni, IE9 e le versioni successive comprese.



HTML markup

<div class="thumbnail"><img src="img.jpg" alt="Image" /></div>

CSS

.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}

.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Con questa tecnica abbiamo posizionato l’angolo superiore sinistro ( top left ) dell’immagine al centro del contenitore padre (.thumbnail) e grazie alla proprietà translate abbiamo ritagliato la miniatura di 200x200px.

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *