Как улучшить отображение фото на аватарке?

Question

[evomed]

Есть аватарка.
Ссылка удалена модератором.
В кодеплее почему-то не могу воспроизвести, но с данным кодом появляется некоторые проблемы:

1. В вертикальных изображениях упользователей часто видны края фото (по всем сторонам). Можно ли кропнуть фотку, чтобы она с увеличением заполнила все пространство круга? Чтобы не было никаких краев.
2. Часто фотографируют средний план и на 90% фото лицо высоко. Можно ли как-то опустить фотку ниже? Кроп из п1 должен дать запас.

Ну либо ваш вариант как можно улучшить отображение фото на таких круглых автарках.

Comments

[Модератор]

Для демонстрации кода страницы пользуйтесь сервисом codepen. Изображения следует размещать согласно п.3.9 Регламента.

Answer 1

[Дмитрий Баскаков]

.avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    /* Можно через это свойство: */
    object-position:center 10%;
    /* или так: object-position:center top; */
    display: inline-block;
    border-radius: 100%;
    border: 3px solid #cecece;
    overflow: hidden;
    background-color: #cecece;
}