Размеры изображения

Можно ли увеличить или уменьшить картинку в окне броузера? Когда картинка вставляется в текстовый документ, например MS Word, ее размеры изменяются с помощью специальных кнопок-манипуляторов, которые появляются, если выделить картинку.

Но ни в броузере, ни, тем более, в Notepad таких средств нет. Как быть?

Общее правило таково: за то, за что в других приложениях "отвечают" средства графического интерфейса, в HTML "отвечают"... Кто?

Правильно, дескрипторы и их параметры. В дескрипторе <IMG> есть два параметра, определяющих ширину и высоту изображения, width и height, соответственно. Задаются эти величины в пикселях. Проведем эксперимент. Не знаю, как у вас, а у меня размер картинки - 300x211 пикселей. Интересно, что получится, если задать параметр width равным, например 100? Каким будет размер картинки? 100x211? Как бы не так: картинка уменьшилась пропорционально так, что ее ши­рина стала равной 100 пикселям (рис. 8.3). Очевидно, аналогичным образом можно использовать параметр height. He верите - попробуйте сами.

Рис. 8.3. Если задать параметр width или height, то размер картинки изменится пропорционально

Однако нужно отметить, что это,  пожалуй, не лучшее применение параметров width и height. Почему? Ведь они, кажется, для того и созданы?

Дело в том, что при этом действительные размеры графического файла, который приходится загружать в сети, не изменяются: меняется только размер того, что выводится на экран, но не количество перекачиваемых килобайтов. Если же вы хотите, чтобы скорость загрузки соответствовала качеству получаемой картинки, нужно уменьшить картинку в графическом редакторе, например в Photoshop.

Но ведь зато, скажете вы, с помощью этих параметров можно сделать маленькую картинку, а на экране увеличить ее?

Можно, конечно. Но результат далеко не всегда оказывается удовлетворительным. Если в этом растровом изображении окажется хоть одна негоризонтальная и невертикальная линия, то при увеличении вам не избежать зубчатых краев, которые подчас выглядят весьма неопрятно (рис. 8.4).

Зато есть другие, весьма полезные способы применения параметров height и width.

Первое, что приходит в голову, - то, что с помощью этих параметров можно менять пропорции изображения, растягивать его в длину и ширину. Этим можно добиться довольно любопытных эффектов (рис. 8.5). Обратите внимание: в коде, показанном на рисунке, дважды использовано одно и то же изображение.

Но главное - с помощью этих параметров можно задать точные габариты изображения. Зачем, ведь они и так соблюдаются? А вот посмотрим.

Сделаем так, чтобы броузер не нашел картинку. Для этого изменим имя файла в коде, например на no.gif. Что мы увидим вместо картинки? Маленький пустой квадратик, как на рис. 8.2. А теперь укажем в дескрипторе <IMG> точные параметры предполагаемого изображения. Что мы видим теперь? Прямоугольник, размеры которого точно соответствуют нашей картинке (рис. 8.6).

Теперь представьте себе, что происходит со страницей и картинкой, которые вы закачиваете из Internet на свой компьютер по медленному модему. Что загружается и появляется на экране первым? Очевидно, то, что важнее, что несет больше информации. Обычно это текст. Заодно он и загружается быстрее. Пока загрузится все остальное, посетитель страницы, вместо того чтобы сидеть без дела, сможет его почитать.

А как картинки? Пока броузер их не получил, он будет выводить вместо них те самые прямоугольники, которые мы видели в нашем эксперименте. Когда бро­узер получит картинки, он поставит их вместо этих прямоугольников.

Теперь представим себя на месте дизайнера такой страницы: мы разметили текст и графику в нужных местах так, чтобы они гармонично и пропорционально дополняли друг друга. И тут вместо картинок разного размера появляются одинаковые   квадратики,   а   текст   съезжает   туда,   куда   заблагорассудилось   броузеру...Приятного мало. Если же указать габариты изображения в дескрипторе <IMG>, то броузер заранее "зарезервирует" под него место, и дизайн страницы не пострадает.

И еще один интересный момент. Что происходит, если окно броузера слишком мало, и текст в нем не помещается? Ответ на этот вопрос мы уже знаем: если текст не помещается по ширине, то он обычно переносится на другую строку, а если это не получается или если текст не помещается по высоте, - появляются полосы прокрутки.

То же самое происходит и в случае, если в окне не помещается картинка. Но есть способ, позволяющий регулировать размеры картинки в зависимости от размеров окна броузера. Это - задание ширины и высоты изображения в процентах. Если, например, задать width=100%, то при изменении ширины окна размер изображения также будет меняться, и оно всегда будет "вписываться" в окно независимо от его размеров (рис. 8.7).

Обратите внимание, что если в процентах указана ширина изображения, а окно броузера изменяется по высоте, то размер картинки меняться не будет. И наоборот, если задать в процентах высоту изображения, а ме­нять ширину окна броузера, размер изображения также не изменится.