ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ
HTML теги. Полный справочник

HTML тег <img>

❮ Prev Полный HTML справочник Next ❯

Пример

Как вставить изображение:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Попробуйте сами »

Больше примеров "Попробуйте сами" ниже.

Определение и использование

Тег <img> определяет изображение на HTML странице.

Тег <img> имеет два обязательных атрибута: src и alt.

Примечание: Изображения технически не вставляются в HTML-страницу, изображения связаны с HTML-страницами. Тег <img> создает пространство для ссылки на изображение.

Совет: Чтобы связать изображение с другим документом, просто вложите тег <img> в теги <a>. Попробуй это »

Поддержка браузерами

Элемент
<img> Yes Yes Yes Yes Yes

Различия между HTML 4.01 и HTML5

Следующие атрибуты: align, border, hspace и vspace не поддерживаются в HTML5.

Различия между HTML и XHTML

В HTML тег <img> не имеет конечного тега.

В XHTML тег <img> должен быть правильно закрыт.

Атрибуты

Атрибут Значение Описание
align top
bottom
middle
left
right		 Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами
alt text Определяет альтернативный текст для изображения
border pixels Не поддерживается в HTML5.
Определяет ширину границы вокруг изображения
crossorigin anonymous
use-credentials		 Разрешить использование изображений со сторонних сайтов, которые позволяют использовать перекрестный доступ с canvas
height pixels Определяет высоту изображения
hspace pixels Не поддерживается в HTML5.
Определяет пробел в левой и правой части изображения
ismap ismap Определяет изображение как серверную карту изображения
longdesc URL Определяет URL для подробного описания изображения
sizes   Определяет размеры изображения для разных макетов страниц
src URL Определяет URL изображения
srcset URL Определяет URL изображения для использования в различных ситуациях
usemap #mapname Определяет изображение в качестве клиентской карты изображений
vspace pixels Не поддерживается в HTML5.
Определяет пробел сверху и снизу изображения
width pixels Определяет ширину изображения

Глобальные атрибуты

Тег <img> также поддерживает Глобальные атрибуты в HTML.

Атрибуты событий

Тег <img> также поддерживает Атрибуты событий в HTML.

Попробуйте сами - Примеры

Вставьте изображения из разных мест
Как вставить изображения из другой папки или с другого веб-сайта.

Сделайте гиперссылку изображения
Как добавить гиперссылку на изображение.

Создать карту изображения
Как создать карту изображения с кликабельными регионами. Каждый регион является гиперссылкой.

Связанные страницы

HTML учебник: HTML Изображения

HTML DOM справочник: Объект Image

CSS Учебник: Стилизация изображений

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <img> со следующими значениями по умолчанию:

Пример

img {
  display: inline-block;
}
Попробуйте сами »
❮ Prev Полный HTML справочник Next ❯