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 una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>