Круглый аватар с сохранением пропорций
Аватар можно вписать в квадратную область и обрезать кругом, сохраняя пропорции изображения.
Назначение
Аватар можно вписать в квадратную область и обрезать кругом, сохраняя пропорции изображения.
Как это работает
Одинаковые width и height задают рамку, object-fit:cover заполняет её без геометрического растяжения. border-radius:50% делает круглую маску; важную часть кадра выбирают через object-position.
Пример
<style>.person{display:flex;align-items:center;gap:12px}.avatar{width:64px;height:64px;object-fit:cover;border-radius:50%}</style>
<div class="person"><img class="avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%2311694e'/%3E%3C/svg%3E" alt=""><span>Учебный автор</span></div>Что должно получиться
Декоративный цветовой образец обрезан в круг, а имя остаётся обычным текстом. Это схема компонента, а не фотография настоящего автора.
Граница применения и частая ошибка
Не дублируйте имя человека в alt, если оно уже находится рядом и изображение не добавляет информации. Но смысловое фото без соседнего имени может потребовать подходящего описания.
Самостоятельная проверка
Подставьте своё широкое изображение и сравните cover с fill. Затем сместите object-position, чтобы сохранить лицо, не меняя форму рамки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.