ImagesLesson 83Free preview
Avatar Images
This lesson is part of How To · All levels
Summary
An avatar image is a small-sized profile picture that is usually shown in a circular shape. The width and height are made equal, and then the border radii are 50% rounded.
Key points
- The width and height of the avatar must be equal to the circle's symmetry.
- Border-radius: 50% form a circle on a square element.
- Object-fit: the cover keeps the proportions of the photos in the circle.
- Border or box-shadow can separate the avatar from the background.
- The alt text is still necessary to explain who is in the photo.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.