При решении поставленной задачи я решил воспользоваться современными возможностями CSS 3. Реализация «круглых аватарок» получилась простой и гибкой. Метод основан на свойстве border-radius.
Для отображения аватара я использовал вот такой HTML-код:
<div class="avatar">
<img src="http://autokadabra.ru/system/uploads/users/1/1938/small.png" alt="avatar" />
</div>
CSS-стили для этого кода выглядят следующим образом:
.avatar{ /* селектор для класса avatar */
float: left; /* прижимаемся к левому краю, обтекание справа */
background: #fff; /* фон */
width: 50px; /* ширина */
height: 50px; /* высота */
padding: 5px; /* внутренние отступы(верх, право, низ, лево) */
border: 1px solid #999; /* граница(ширина, тип, цвет) */
border-radius: 50%; /*скругление равно 50 процентам от общей ширины, фактически 25 пикселей, вот и круг получили(ещё есть с префиксом -moz и -o) */
box-shadow: 0px 1px 1px 1px #bbb /* смещение по горизонтали, смещение по вертикали, размытие, увеличение и цвет */
}
.avatar img{ /* селектор для картинки, которая "внутри" класса avatar */
display: block; /* картинка выводится как блок, по ширине будет равен родителю(диву в котором находится) */
width: 100%; /* ширина 100% */
border: 0; /* граница нулевая */
margin: 0; /* внешний отступ отстутствует */
border-radius: 50%; /* читай выше */
}