Достаточно часто бывает, что графические изображения имеют не те размеры, которые требуются для размещения на странице Web. Эта проблема постоянно возникает, если не используется или отсутствует программное обеспечение, которое позволяет изменять размер изображения прежде, чем помещать его на странице. Однако с помощью свойств стиля width и height, используемых для этих изображений, размеры изображений можно изменять во время вывода в браузере.

Реальный размер изображения, показанного на рисунке 3.12 , равен 162 x 108 пикселей. При выводе на странице его ширина задается равной 100 пикселям с помощью линейной таблицы стилей.

<img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"
style="width:100px"/>

Рис. 3.13. Динамическое изменение размера изображения

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

Хотя размеры изображения могут автоматически изменяться при выводе в браузере, его реальные размеры останутся без изменений. Слишком большое изображение может занимать значительное дисковое пространство и создавать задержку при загрузке. В идеале необходимо отредактировать большое изображение, чтобы уменьшить его реальный размер до размеров его изображения на странице, а не использовать стили ширины и высоты для изменения только выводимого размера. Изображение не должно обычно выводиться с размером большим, чем его исходный размер. При увеличении размера можно потерять точность и получить нечеткое изображение.

Вспомните из предыдущего материала, что тег <img/> имеет исключенные атрибуты width и height для изменения размеров изображений. Эти атрибуты должны заменяться соответствующими свойствами стиля width и height для удовлетворения стандартам XHTML. Хотя их имена совпадают, способы их применения различаются.

Значения стиля для ширины и высоты можно применять для любых тегов XHTML, а не только для тегов <hr/> и <img/>, как в предыдущих примерах. В дальнейшем будут рассмотрены случаи изменения размеров других элементов страницы с согласованием их с точными размерами на странице.