Как сделать круглую картинку
Короткий ответ
Квадратной картинке задайте скругление 50%:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="80" height="80" style="border-radius: 50%;">Неквадратная картинка
Задайте одинаковые ширину и высоту, а object-fit: cover обрежет лишнее без искажений:
<img src="/media/photo-400x250.jpg" alt="Avatar" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">Вместо двух размеров можно задать ширину и aspect-ratio: 1 — высота станет такой же.
Обводка вокруг аватара
Кольцо вокруг картинки рисуют через outline с отступом — он повторяет скругление и не меняет размер элемента. Так часто отмечают пользователя «в сети» или выбранный профиль:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="64" height="64" style="border-radius: 50%; outline: 3px solid seagreen; outline-offset: 2px;">Круг с буквой
Если картинки нет, аватар делают из блока:
<div style="display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rebeccapurple; color: white; font-weight: 700;">A</div>Частая ошибка
Неквадратной картинке дают скругление 50% без одинаковых размеров. Получается не круг, а овал:
<img src="/media/photo-400x250.jpg" alt="Avatar" width="128" style="border-radius: 50%;">Функции из этого ответа
- border-radius — Скругляет углы элемента.
- <img> — Картинка.
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.
- aspect-ratio — Соотношение ширины и высоты: недостающий размер браузер вычисляет сам.