Тег img создает картинку. Путь к картинке прописывается в атрибуте src. Не требует закрывающего тега.
Атрибуты
Атрибут | Описание |
---|---|
src |
Задает путь к картинке.
Обязательный атрибут. |
alt |
Альтернативный текст, который будет показан вместо картинки,
если она не найдена (к примеру, неправильно прописан путь к ней).
Обязательный атрибут. При его отсутствии будет ругаться валидатор (программа, которая проверяет корректность HTML или CSS). |
width | Ширина картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки. |
height | Высота картинки, в пикселях (в этом случае единицы измерения не указываются) или процентах от родителя картинки. |
Нюансы
Если для картинки не задана ни ширина, ни высота - картинка будет иметь свой реальный размер. Если задана высота - картинка станет заданной высоты, а по ширине подстроится так, чтобы ее пропорции не были искажены.
Если задана только ширина - аналогично, картинка подстроится по высоте так, чтобы сохранить пропорции.
Если задана и ширина, и высота - пропорции картинки могут быть искажены (а может и нет, как угадаете). Если ширина или высота (или оба вместе) больше реальной - картинка увеличится, но потеряет в качестве.
Рекомендуется задавать ширину и высоту картинкам в атрибутах (а не через CSS) - в этом случае браузер быстрее будет загружать изображения - ему нет нужды вычислять размер каждой картинки после ее получения.
Не рекомендуется уменьшать реальные размеры картинки без необходимости. К примеру, реальный размер картинки 1000 на 1000 пикселей, а вы ей зададите ширину в 100px. В этом случае картинка на экране будет выглядеть на 100 пикселей, однако иметь размер на всю тысячу и, соответственно, загружаться намного дольше.
Пример
Давайте на сайт добавим картинку и не будем задавать атрибуты height и width. Картинка будет иметь свой реальный размер:
<img src="monkey.png" alt="обезьянка">
:
Пример
Давайте попробуем картинке добавить ширина с помощью атрибута width, высота при этом должна подстроиться так, чтобы сохранить пропорции картинки:
<img src="monkey.png" width="200" alt="обезьянка">
:
Пример
А теперь давайте картинке добавим высоту с помощью атрибута height, ширина при этом подстроится так, чтобы сохранить пропорции картинки:
<img src="monkey.png" height="100" alt="обезьянка">
:
Пример
Давайте одновременно картинке добавим и высоту, и ширину. Пропорции картинки при этом должны стать искаженными (не обязательно, но в данном случае высота и ширина подобраны так, чтобы пропорции исказились):
<img src="monkey.png" height="100" width="300" alt="обезьянка">
:
Пример
Давайте поставим неправильный путь к картинке (для простоты оставим его пустым). Вместо картинки мы увидим содержимое атрибута alt (кажется, что это обычный текст - но попробуйте его скопировать - у вас ничего не получится, он будет тянутся как картинка):
<img src="" alt="обезьянка">
:
Смотрите также
-
свойство width,
которое задает ширину элемента -
свойство height,
которое задает ширину элемента -
свойство background-image,
которое задает фоновую картинку