Главная » Статьи » Web-кодинг » CSS

Уменьшение изображений (ограничение максимальных размеров картинки) на форуме и сайте (CSS + expression)

Зачастую, пользователи и гости сайта добавляют изображения на сайт, или прикрепляют к постам на форуме, и если такое изображение больше определённых размеров оно может испортить внешний вид сайта. Вот в таких случаях и возникает необходимость ограничить максимальные размеры картинок.

Сделать это достаточно просто. И принципиально-различных решений всего два: при помощи стилей - CSS expression для ранних версий Internet Explorer´а), и при помощи JavaScript

В данном материале расскажу про ограничение размеров при помощи стилей, так как считаю наиболее грамотным и простым решением, если не считать «ботвы» с expression, вместо которого лучше использовать полноценный JavaScript...


Ограничение максимальных размеров картинок в контент модулях

И так, для материалов контент модулей (все модули, кроме форума, гостевой, мини чата) в CSS добавляем следующие стили:

Code (CSS)
/* Для нормальных браузеров */
.eMessage img{width:auto;height:auto;max-width:400px!important;max-height:400px!important;}
/* Для ИЕ версии 6 */
* html .eMessage img{behavior: expression((this.clientWidth>400&&this.clientWidth>this.clientHeight)?(this.style.width='400px',this.style.height='auto') :(this.clientHeight>400&&this.clientHeight>this.clientWidth)?(this.style.height='400px',this.style.width='auto'):0,style.behavior=null);} /* Устанавливаемразмеры */

Где:

.eMessage img{} - устанавливаем максимально допустимые размеры по высоте и ширине для картинок в блоке с классом «.eMessage»

* html .eMessage img{behavior: expression();} - функция, проверяющая размер картинки и устанавливающая ширину «400px» и высоту  «auto» для картинок ширина которых более 400 и больше высоты; и устанавливающая высоту «400px» и ширину «auto» длякартинок высота которых более 400 и больше ширины.

expression(), построенный таким образом,  срабатывает один раз. То есть не действует на динамически добавляемые картинки, функцией get{};, например.

Данные стили помещаются в самый конец основной таблицы стилей, стили для MSIE v6 можно (но не обязательно, то есть если вы не в курсе - просто добавляем данные стили в CSS) вынести в отдельную таблицу, специально для ИЕ, подключаемую через условные комментарии.

Типа:

Code (HTML)
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="/css/_msie6and7.css" /><![endif]-->

Подробнее об этом в теме: Условные комментарии (Conditional Comments) для MSIE.


Для контент моделей, типа «Новости сайта», «Каталог статей», «Каталог файлов»и пр. необходимо (!!!) отредактировать шаблоны «Вид материалов» и «Страница материала и коментария к нему», а именно:

Найти в коде шаблона оператор $MESSAGE$ и заключить его в блок с классом «eMessage» (если он не заключён!) или назначить блоку/ячейке таблицы  класс  «eMessage».

Типа вот так:

Code (HTML)
<div class="eMessage">$MESSAGE$</div>

Ограничение максимальных размеров картинок для форума

Стили для форума.
Порядок действий тот же.

Code (CSS)
/* Для нормальных браузеров */
td.posttdMessage img{width:auto;height:auto;max-width:400px!important;max-height:400px!important;}
/* Для ИЕ версии 6 */
* html td.posttdMessage img{behavior: expression((this.clientWidth>400&&this.clientWidth>this.clientHeight)?(this.style.width='400px',this.style.height='auto') :(this.clientHeight>400&&this.clientHeight>this.clientWidth)?(this.style.height='400px',this.style.width='auto'):0,style.behavior=null);}

Всё вместе (и для форума, и для модулей)

Стили для форума и для контент модулей:

Code (CSS)
/* Для нормальных браузеров */
.eMessage img,td.posttdMessage img{width:auto;height:auto;max-width:400px!important;max-height:400px!important;} /* Для модулей и для форума */
/* Для ИЕ версии 6 */
* html .eMessage img,* html td.posttdMessage img{behavior: expression((this.clientWidth>400&&this.clientWidth>this.clientHeight)?(this.style.width='400px',this.style.height='auto') :(this.clientHeight>400&&this.clientHeight>this.clientWidth)?(this.style.height='400px',this.style.width='auto'):0,style.behavior=null);}
/* Для модулей и для форума - для ИЕv6 */


Пример наблюдаем у меня на форуме - в любой теме, или вот на этой тестовой страничке.

Обсудить вопрос можно на форуме, в теме: Ограничение размеров любых изображений на форуме.


Автор: Likbezz aka Flesh




Источник: Кроссбраузерное, уменьшение изображений, ограничение, максимальных, размеров, для форума, сайта,CSS, expression
Категория: CSS | Добавил: likbezz (07.08.2011)
Просмотров: 17842 | Комментарии: 7 | Теги: ограничение, максимальных, на форуме, уменьшение изображений, Expression, CSS + expression, на сайте, Кроссбраузерное, CSS, размеров
Всего комментариев: 7
0  
7  vitkit3   [10.05.2015]

Оказалось, для комментариев, чтобы задать размер картинки, нужно делать всё то же самое, только изменить одну букву: .eMessage на .cMessage - и проблемы с размерами картинок в комментариях также исчезают.

0  
6  vitkit3   [10.05.2015]

Скажите, пожалуйста. а как в css задать максимальную ширину картинок в комментариях, если это возможно?

0  
5  Rozario_Agro   [14.06.2013]

всё понялЬ эта фишка автоматом уменьшает фотки hands отлично! спасибо! biggrin

0  
4  Rozario_Agro   [14.06.2013]

Всем приветЫ:D

а что данная фишка делает ? это типа предупреждение что фото слишком большое или фото автоматом уменьшается ?

0  
3  stant   [04.05.2013]

Преогромнейшее спасибо. Перелопатил кучу сайтов, пока не наткнулся на Ваш чудесный сайт. Очень помогло... Еще раз, большущее, спасибо. Были бы все ресурсы полезны, как Ваш!!!

0  
2  voron   [17.03.2013]

Здравствуйте.
А как сделать, чтобы в двух разных модулях было разное уменьшение картинок?
Например: для каталога файлов 250х300, а для каталога статей 500х400.
Спасибо

0  
1  Gron   [16.12.2011]

Спасибо Вам огромное! Очень сильно помогла эта информация!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]