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

В данном примере рассмотрим возможность отображения участка изображения заданного размера относительно его центра, средствами 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