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 *