Юзерпики на моём сайте

У меня на сайте, в комментариях широко используются юзерпики. Я уже неоднократно писал как я их показываю. Естественно, каждый сервис выдаёт юзерпики своего размера, у меня на сайте принят размер 41×41 пикселей. Ранее я ставил ширину и высоту картинки в 41 пиксель, многие неквадратные картинки искажались. Теперь этого не происходит, благодаря небольшому изменению CSS-файла:

.avatar { max-width: 41px; max-heigth; 41px }
.avatar, x\:* { max-width: auto; max-height: auto; zoom: expression(41 / Math.max(this.width, this.height)) }

Для всех браузеров, кроме IE выставлены максимальная ширина и высота картинки, в IE используется нестандартное свойство zoom, позволяющее масштабировать элемент.

Поделиться
Отправить
13 комментариев
lusever.ru

zoom: expression(runtimeStyle.zoom = (41 / Math.max(this.width, this.height))) },
http://lusever.ru/proceedings/thin_css/index.html :)

Евгений Степанищев (bolknote.ru)

Комментарий для lusever.ru:

Так, я не понял почему именно runtimeStyle.

lusever.ru

Комментарий для Евгения Степанищева:

Можно style, правило перебьется, и больше вычисляться не должно. Забыл, что приоритетнее.

Евгений Степанищев (bolknote.ru)

Комментарий для lusever.ru:

Зачем вообще присваивание style или runtimeStyle?

anton3.livejournal.com

Достаточно было ограничить по высоте, юзерпиков с большей шириной очень мало.

Евгений Степанищев (bolknote.ru)

Комментарий для anton3.livejournal.com:

Несколько штук используют пользователи у меня на сайте.

lusever.ru

Комментарий для Евгения Степанищева:

Поставь alert() внутри expression’a :)
expression, выполняется при каждом движении мышки (и некоторых других несущественных действиях). Это здорово напрягает процессор, т. е. если аватарок будет много, то тормозить будет сильно. Конечно зависит от мощности компа, но прочувствовать.

Евгений Степанищев (bolknote.ru)

Комментарий для lusever.ru:

Не могу проверить — дома только IE8b1, там всё иначе. Если присвоить runtimeStyle, то alert будет выполняться только один раз? Почему?

lusever.ru

Комментарий для Евгения Степанищева:

Потому что мы переопределили свойство, для конкретного нода. Если раньше zoom содержал expression, то теперь только числовое значение.
Я не пробовал IE8, разве там отменили expression?

Евгений Степанищев (bolknote.ru)

Комментарий для lusever.ru:

В IE8 пока вообще мало что работает нормально, это первая бета с качеством первой альфы.

Попробовал runtimeStyle, точно так же — alert срабатывает постоянно. Я до сих пор не понимаю с чего вдруг expression должен перестать выполняться. Как только браузер решает, что ему надо сделать redraw, он запрашивает свойства объекта и expression выполняется. Для IE это нормально.

lusever.ru

Комментарий для Евгения Степанищева:

Покажи плз код, где алерт срабатывает постоянно.

Евгений Степанищев (bolknote.ru)

Комментарий для lusever.ru:

Да просто этот кусок с void(alert(’1’))

lusever.ru

Комментарий для Евгения Степанищева:

А полностью, чтобы со словом expression?

Популярное