Как показать превью картинки относительно центра

В данном примере рассмотрим возможность отображения участка изображения заданного размера относительно его центра, средствами css3.

Самый простой способ:

Заключаеется в использовании background-image, выровненного по центру внутри элемента с фиксированными размерами

css стили:

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

html код:

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

В данном примере для класса center-cropped задаются фиксированные размеры, а позиция background заданная через css задается от центра по ширине и высоте.

Пример с тегом img

Данный способ отличается от предыдущего только наличием тега img, благодаря которому изображение можно перетащить или сохранить.

CSS:

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Задаем для картинки полную прозрачность чтобы она не отображалась */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

HTML код:

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

Таким образом для тега IMG задана полная прозрачность и картинку пользователь не видит, и по факту она не кропнута по центру, но если попытаться ее перетащить чтобы сохранить или попробовать сохранить через контекстное меню, то в отличие от предыдущего способа все получится, потому что картинка фактически присутствует.

Способ для современных браузеров

Данная спецификация относится только к браузерам с полной поддержкой стандарта CSS3.

CSS3

.center-cropped {
  object-fit: none; /* Запрещаем масштабирование изображения */
  object-position: center; /* Центрируем картинку от центра */
  height: 100px;
  width: 100px;
}

HTML код

<img class="center-cropped" src="http://placehold.it/200x200" />

Данный способ основан на двух свойствах принятых в стандарте css3, а именно:  object-fit и object-position, которые всвязке дают полный контроль над масштабированием и позиционированием содержимого тега IMG