Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

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

Синтаксис

HTML	<img height="высота">
XHTML	<img height="высота" />

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная высота изображения.

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

HTML 4.01 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Тег IMG, атрибут width</title>

</head>

<body>

<p><img src="/images/sample.gif" width="350" height="250" alt=""></p>

</body>

</html>

hspace

Горизонтальный отступ от изображения до окружающего контента.

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

ismap

Говорит браузеру, что картинка является серверной картой-изображением.

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

src

Путь к графическому файлу.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис

HTML	<img src="URL">
XHTML	<img src="URL" />

Обязательный атрибут

Да.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример. Путь к графическому файлу

HTML 4.01 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Тег IMG, атрибут src</title>

</head>

<body>

<p><img src="http://htmlbook.ru/images/logo.gif" width="450" height="450" alt=""></p>

</body>

</html>

vspace

Вертикальный отступ от изображения до окружающего контента.