Мы знаем, что если задачу создания миниатюр оставить на усмотрение программы, эффект будет намного лучше. Однако иногда из-за определенных факторов, например, из-за того, что сервер не поддерживает GD, неизбежно нужно попросить CSS сделать это за вас.
Чтобы уменьшить большое изображение до определенного размера в современных браузерах, просто используйте свойства CSS max-width и max-height.
В IE 6.0 и более ранних версиях два вышеуказанных свойства CSS будут игнорироваться. Раньше, чтобы справиться с подобными вещами, мы часто прибегали к Javascript, а затем добавляли к изображениям события загрузки. Например:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:авто;
}
</скрипт>
Это, безусловно, может решить проблему, но вызовет проблемы при обновлении будущих страниц — по мере того, как браузеры улучшают поддержку CSS, рано или поздно мы удалим все события загрузки из изображений. Настало время показа Expression. Поскольку IE поддерживает размещение некоторых скриптов в CSS через Expression, а этот скрипт доступен только для IE 6.0 и ниже, его лучше всего записать в Expression.
Наконец, чтобы уменьшить большое изображение до размеров 50х50 пикселей, вы можете обратиться к следующему CSS:
.thumbImage{
максимальная ширина: 50 пикселей;
максимальная высота: 50 пикселей;
}
*html.thumbImage{
ширина:выражение(this.width>50&&this.width>this.height?50:auto);
высота:выражение(this.height>50?50:auto);
}
