/html/img:> Изображение_
Элемент img
Синтаксис
HTML
XHTML
<img src="..." alt="...">
Описание
Элемент img (от англ. "image" ‒ «изображение») вставляет изображение в документ. Данный элемент должен быть расположен внутри блочного элемента (например, div, p).
Примечание
Из изображения можно сделать гиперссылку - просто вложив img в элемент гиперссылки.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Image: IMG | Перевод |
| 3.2 | IMG - inline images | |
| 4.01 | 13.2 Including an image: the IMG element DTD: Transitional
Strict
Frameset
|
|
| 5.0 | 4.7.1 The img element | |
| 5.1 | 4.7.5. The img element | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
|
| 1.1 | Extensible HyperText Markup Language | |
Атрибуты
- align
- Задаёт выравнивание картинки в документе, в том числе и её обтекание текстом.
- alt
- Текст описания изображения.
- border
- Устанавливает ширину рамки вокруг изображения.
- crossorigin
- Определяет то как элемент обрабатывает crossorigin запросы.
- height
- Устанавливает высоту изображения.
- hspace
- Устанавливает боковые отступы от изображения.
- ismap
- Указывает, что изображение является серверной картой-изображением.
- longdesc
- URL-адрес документа с полным описанием изображения.
- lowsrc
- Указывает URL-адрес предварительного изображения.
- name
- Указывает имя изображения.
- sizes
- Размеры изображения между контрольными точками.
- src
- Указывает URL-адрес изображения.
- srcset
- Изображения для использования в различных ситуациях.
- usemap
- Присоединяет к изображению клиентскую карту-изображения.
- vspace
- Устанавливает размер верхнего и нижнего отступа от границы изображения до остального содержимого страницы.
- width
- Устанавливает ширину изображения.
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент img</title>
</head>
<body>
<h1>Пример с элементом "img"</h1>
<p>Нажмите на изображение, что бы перейти на главную страницу.</p>
<p><a href="/">
<img src="/images/icon.png" alt="ProgrammerBook.ru" width="100" height="66">
</a></p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент img</title>
</head>
<body>
<h1>Пример с элементом "img"</h1>
<p>Нажмите на изображение, что бы перейти на главную страницу.</p>
<p><a href="/">
<img src="/images/icon.png" alt="ProgrammerBook.ru" width="100" height="66">
</a></p>
</body>
</html>
Элемент img