border-radius:50% и аватар

Как можно решить такую проблему.если аватар юзера квадратный более менее,то все ок.
а если прямоугольный, то остается пустое место.
мб у кого есть решение?))
<style>
.left .avatar_id{$users[$message['id_sender']]->id}
{
margin-right: 15px;
float:left;
}
.avatar_id{$users[$message['id_sender']]->id}
{
width:48px;
height:48px;
background: #CCC url({$users[$message['id_sender']]->getAvatar2(48)}) no-repeat;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius:50%;
border-radius: 50%;
background-size:contain;
border:1px solid #c0e15c;
}
</style>


<div class="avatar_id{$users[$message['id_sender']]->id}"></div>

а пример? Скриншот бы.

не аватар а блок в котором аватар будет делай круглым, внутри аватар по высоте (только высоте) и минимальной ширине задавай.
блок overflow: hidden; и все

ничего не понял из выше сказанного

background-size:contain; -> background-size:cover;

тему можно крыть

DEMONS (7 Января 2016 / 19:46)
ничего не понял из выше сказанного

В твоем случае не стоит делать изображение бекграундом блока.
Сделай как-то так:

<?php
<style>
.avatar{
  width:48px;
  height:48px;
  float:left;
  overflow:hi dden;
  background: #ccc;
  -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius:50%; border-radius: 50%;
  border:1px solid #c0e15c;
}
.avatar img{
  border:no ne;
  -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius:50%; border-radius: 50%;
  width:100%;
  height:auto;
}
</style>
<div class="avatar">
  <img src="ссылка" alt="" onload="if (this.clientWidth>this.clientHeight){this.style.width='auto';this.style.height='100%';}" />
</div>

Не проверял, но должно работать. По умолчанию здесь изображению задана ширина 100%, а высота автоматическая. При загрузке страницы определяется, если изображение горизонтальное - то ширина становится автоматической, а высота - 100%.

Одно не пойму.... чё к этим круглым аватарам все прицепились? Я это встретил только на спейсе,но зачем косить под г.но,если оно г.но ...???!

7. Prikolist, лет 5 уже гугл юзает.
дальше спейса не ходите?)

ramzes (11 Января 2016 / 23:02)
7. Prikolist, лет 5 уже гугл юзает.
дальше спейса не ходите?)

Я вообще про скругление авы а не про соцки и гуглы...

9. Prikolist, я вообще именно о круглых аватарах, а не "про соцки и гуглы"
что бы ты понял точно, о чем я.
это ваш гно-спейсес косит под других, а не под него кто то

Добавлено через 01:45 сек.
а по сути. некоторые дизайны с круглыми аватарами выглядят лучше