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

1. Александр (07.01.2016 / 02:39)
Как можно решить такую проблему.если аватар юзера квадратный более менее,то все ок.
а если прямоугольный, то остается пустое место.
мб у кого есть решение?))
<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>

2. Дмитрий (07.01.2016 / 12:40)
а пример? Скриншот бы.

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

4. Александр (07.01.2016 / 20:46)
ничего не понял из выше сказанного

5. Александр (11.01.2016 / 01:52)
background-size:contain; -> background-size:cover;

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

6. Дмитрий (11.01.2016 / 14:38)

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. Евгений (11.01.2016 / 20:36)
Одно не пойму.... чё к этим круглым аватарам все прицепились? Я это встретил только на спейсе,но зачем косить под г.но,если оно г.но ...???!

8. ramzes (11.01.2016 / 21:02)
7. Prikolist, лет 5 уже гугл юзает.
дальше спейса не ходите?)

9. Евгений (11.01.2016 / 21:11)

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

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

10. ramzes (11.01.2016 / 21:52)
9. Prikolist, я вообще именно о круглых аватарах, а не "про соцки и гуглы"
что бы ты понял точно, о чем я.
это ваш гно-спейсес косит под других, а не под него кто то

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

11. Евгений (12.01.2016 / 01:13)

ramzes (11 Января 2016 / 23:52)
9. Prikolist, я вообще именно о круглых аватарах, а не "про соцки и гуглы"
что бы ты понял точно, о чем я.
это ваш гно-спейсес косит под других, а не под него кто то

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

Ну не знаю,мне скругление не особо нравится. У меня в паре дизайнов оно. (В роторе)

12. Александр (12.01.2016 / 01:49)
к чему тут спейс)
у меня ваще самопис и не соц,а форум.

13. Евгений (12.01.2016 / 06:27)

DEMONS (12 Января 2016 / 03:49)
к чему тут спейс)
у меня ваще самопис и не соц,а форум.

Я говорю первый раз увидел скругление авок там. Че вы все к словам цепляетесь?!

14. ramzes (12.01.2016 / 15:23)
13. Prikolist, вообще то это ты влез со своим имхо в тему с чисто техническим вопром.
автор, глянь
http://jsfiddle.net/shelest5000/U8cm8/

URL: https://visavi.net/topics/42751