Лучший способ обрезать картинку и отцентрировать

Если у вас на сайте блоки под изображения квадратного типа, а сами картинки неправильного размера, то вы при помощи этого трюка можете легко это исправит. Техника использует преобразования CSS3, поэтому она работает во всех современных браузерах, включая IE9 и выше. В этом примере вы научитесь как центрировать и обрезать изображение в div блоке.

Разметка HTML

<div class="thumbnail">  
    <img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">  
    <img src="portrait-img.jpg" class="portrait" 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%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}