Зачастую, пользователи и гости сайта добавляют изображения на сайт, или прикрепляют к постам на форуме, и если такое изображение больше определённых размеров оно может испортить внешний вид сайта. Вот в таких случаях и возникает необходимость ограничить максимальные размеры картинок. Сделать это достаточно просто. И принципиально-различных решений всего два: при помощи стилей - CSS (и expression для ранних версий Internet Explorer´а), и при помощи JavaScript В данном материале расскажу про ограничение размеров при помощи стилей, так как считаю наиболее грамотным и простым решением, если не считать «ботвы» с expression, вместо которого лучше использовать полноценный JavaScript...
Ограничение максимальных размеров картинок в контент модуляхИ так, для материалов контент модулей (все модули, кроме форума, гостевой, мини чата) в CSS добавляем следующие стили: Code (CSS)
.eMessage img{width:auto;height:auto;max-width:400px!important;max-height:400px!important;}
* 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;}
* 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;}
* 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);}
Источник: Кроссбраузерное, уменьшение изображений, ограничение, максимальных, размеров, для форума, сайта,CSS, expression | 