Учебник по HTML 4

Задание размеров выводимого изображения в Web-документах

Тег встраивания изображений в Web-документы имеет два необязательных параметра, указывающих размеры изображения при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра.

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

Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Вопросы использования миниатюрных версий изображений будут рассмотрены ниже.

Если не требуется решать задачу изменения размеров изображения в Web-документах, настоятельно рекомендуется указывать их реальные размеры в пикселах с помощью параметров WIDTH и HEIGHT. Определить действительные размеры используемых вами изображений можно при помощи любой из многих программ работы с растровой графикой. Например, LView Pro или Paint Shop Pro. Указание действительных размеров:

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

Приведем пример HTML-кода, отображение которого показано на рис. 3.7. Действительные размеры отображаемого рисунка — 150x174. Этот рисунок отображен трижды в разном масштабе. Для изменения масштаба использовано указание ширины изображения, а его высота автоматически масштабируется.

В итоге рисунки при отображении будут иметь масштаб— 2:1, 1:1 и 1:2.

<HTML>

<TITLE>Задание размеров изображений</TITLE>

<BODY>

</BODY>

</HTML>

Задание размеров выводимого изображения в Web-документах

Рис. З.7. Все три изображения являются отображением одного и того же файла