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

Печать RSS
463

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

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

2000 лет д.н.э.
0
не аватар а блок в котором аватар будет делай круглым, внутри аватар по высоте (только высоте) и минимальной ширине задавай.
блок overflow: hidden; и все
Автор
Землянин
0
ничего не понял из выше сказанного
Прикрепленные файлы:
64461.png
64461.png (15.38Kb)
Автор
Землянин
0
background-size:contain; -> background-size:cover;

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

Голубые штаны
0
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%.
Изменил: Дмитрий (11.01.2016 / 14:38)

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

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

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

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

Добавлено через 01:45 сек.
а по сути. некоторые дизайны с круглыми аватарами выглядят лучше
Изменил: ramzes (11.01.2016 / 21:53)
Стикеры / Теги / Правила / Топ тем / Топ постов / Поиск