Изображения

Элемент `img`

Элемент img внедряет изображение в текущий документ в месте определения элемента. Элемент img не имеет содержимого — он замещается на ходу изображением, указанным в атрибуте src.

Пример базового изображения — Рис. 1 - Простейший пример использования элемента img с атрибутом src

Альтернативный текст

Атрибут alt предоставляет краткое описание изображения. Он содержит альтернативный текст, который отображается, если изображение не может быть выведено. Пользовательские агенты должны отображать альтернативный текст, если они не поддерживают изображения, или сконфигурированы так, чтобы не показывать изображения (отключен показ изображений).

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

Атрибуты width и height задают размеры области изображения. Если оба атрибута не заданы, размер изображения будет определен после его полной загрузки, после чего размеры области будут изменены для размещения содержания картинки. Если задан только один из атрибутов, второй размер будет высчитан в соответствие с пропорциями изображения и заданным атрибутом. При указании обоих атрибутов ПА «впишет» изображение в область с указанными размерами.

Изображение без указания размеров — Рис. 3 - Изображение без атрибутов width и height (оригинальный размер)

Изображение только с width — Рис. 4 - Атрибут width="200" (высота подбирается пропорционально)

Изображение с width и height — Рис. 5 - Атрибуты width="300" и height="150" (изображение может исказиться)

Для добавления гибких (responsive) изображений (таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками) используют атрибуты sizes и srcset. Атрибут sizes задаёт размеры изображения для разных макетов страницы. Атрибут srcset задаёт путь к графическим файлам с учётом размера изображения и устройств.

Рис. 6 - Адаптивное изображение с атрибутами srcset и sizes

Подпись к изображению

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

Рис. 7 - Пример использования элементов figure и figcaption для создания подписи к изображению

Рис. 8 - Подпись может быть и перед изображением

Дополнительные атрибуты изображений

Атрибут title

Изображение с подсказкой — Рис. 9 - Атрибут title (наведите курсор, чтобы увидеть подсказку)

Атрибут align

Выравнивание слева Изображение с align="left". Текст обтекает изображение справа. Атрибут align может принимать значения left, right, top, middle, bottom.

Выравнивание справа Изображение с align="right". Текст обтекает изображение слева.

Выравнивание по верху Изображение с align="top". Текст выравнивается по верхнему краю изображения.

Выравнивание по середине Изображение с align="middle". Текст выравнивается по центру изображения.

Выравнивание по низу Изображение с align="bottom". Текст выравнивается по нижнему краю изображения.

Рис. 10 - Демонстрация различных значений атрибута align

Атрибут border

Рамка 0 — Рис. 11 - border="0" (без рамки)

Рамка 5 — Рис. 12 - border="5" (рамка 5 пикселей)

Атрибуты vspace и hspace

Без отступов. Текст прилегает вплотную к изображению.

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

Рис. 13 - Демонстрация атрибутов vspace и hspace

Элемент picture

HTML-элемент picture служит контейнером для одного или более элементов source и одного элемента img для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов source и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов source найдено не будет, то будет выбран файл, указанный атрибутом src элемента img. Затем выбранное изображение отображается в пространстве, занятом элементом img.

Рис. 14 - Элемент picture с несколькими source для разных разрешений экрана

Вернуться на главную | Лабораторная 1.1 | Лабораторная 1.2 | Лабораторная 1.3