Какие свойства есть у тега img

В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта — залог его успешного развития. Для вывода изображений в html существует единственный тег <img>.

1. Синтаксис тега <img>

<img alt=”Описание изображения” src=”URL” [атрибуты]>

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега </img>.

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt=”описание” – не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

2. Как вставить в html картинку

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

<html>
<body>
…
<img src=”https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg”>
…
</body>
</html>

Этот код преобразуется на странице в следующее:

Какие свойства есть у тега img

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=”/img/kartinka.jpg”, т.е. указывается относительный адрес.

Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.

Пример 2.2. Вывод нескольких картинок в html друг за другом

<html>
<body>
…
<img src=”https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg”>
<img src=”https://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg”>
…
</body>
</html>

Преобразуется на странице в следующее:

Какие свойства есть у тега img

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

<html>
<body>
…
<img src=”123.jpg”>
<img width=”400″ height=”50″ alt=”Пример изображения” src=”321.jpg”>
…
</body>
</html>

Преобразуется на странице в следующее:

Какие свойства есть у тега img

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

3. Атрибуты и свойства тега <img>

1. Свойство align=”параметр” — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

left — выравнивание по левому краю
middle — выравнивание середины изображения по базовой линии текущей строки
bottom — выравнивание нижней границы изображения по окружающему тексту
top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

<html>
<body>
…
<img align=”right” src=”https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg”>
…
</body>
</html>

Преобразуется на странице в следующее:

Какие свойства есть у тега img

2. Свойство alt=”текст” — подсказка/описание картинки. Выполняет сразу две важные функции:

Выдает подсказку при наведении
Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border=”ЧИСЛО” — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

<body>
…
<img border=”5″ src=”https://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg”>
…
</body>

Преобразуется на странице в следующее:

4. Свойство bordercolor=”цвет” — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

<body>
…
<img border=”5″ bordercolor=”#000″ src=”https://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg”>
…
</body>

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

<body>
…
<img style=”border: 5px solid #000;” src=”https://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg”>
…
</body>

5. Свойство height=”ЧИСЛО” — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=”ЧИСЛО” — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=”ЧИСЛО” — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=”ЧИСЛО” — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

margin-top: X px; (X – отступ сверху)
margin-bottom: Y px; (Y – отступ внизу)
margin-left: L px; (L – отступ слева)
margin-right: R px; (R – отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

<body>
…
<img style=”margin-top:10px; margin-left:50px”
src=”https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg”>
…
</body>

Преобразуется на странице в следующее:

Какие свойства есть у тега img

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=”имя_класса” — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

4. Как сделать картинку ссылкой

Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег <img> тегом <a> (ссылкой).

Например

<html>
<body>
…
<a href=”Куда_ведет_ссылка”><img src=”Адрес_изображения”></a>
…
</body>
</html>

5. Как скруглить углы у картинки

Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius: N px, где N – радиус среза картинки. Например:

<img src=”https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg”
style=”border-radius: 30px”>

Какие свойства есть у тега img

Более подробно про скргуления углов читайте в отдельной статье как скруглить углы в HTML через CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 8. HTML тег form – подробное описание с примерами

Читайте также:

• Описание заголовочных тегов html

• Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)

• Атрибут position в HTML

• HTML тег <ul> – подробное описание с примерами

• HTML теги <h1>-<h6> – заголовочные теги внутри страницы

• Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля

• HTML тег <embed>

• HTML тег <object>

← Перейти в каталог html уроков и советов

Источник

HTML теги

Значение и применение

Изображения в HTML документе определяются тегом <img>.

Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt, который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).

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

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom middle	Не поддерживается в HTML5. Определяет выравнивание изображения в соответствии с окружающими элементами.
alt	text	Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). Является обязательным атрибутом.
border	pixels	Не поддерживается в HTML5. Определяет ширину границы вокруг изображения.
crossorigin	anonymous use-credentials	Атрибут определяет, используется ли CORS при загрузке изображения. Изображения, загруженные с помощью CORS, могут использоваться в элементах <canvas>, при этом функциональность последних не ограничивается. У этого атрибута есть 2 допустимых значения: anonymous В этом случае перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается. use-credentials Перед загрузкой изображения выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде – cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header, иначе, использование изображения в <canvas> ограничивается. Если данный атрибут не задан, то CORS при загрузке изображения не используется (отсутствует заголовок Origin: HTTP header), и как следствие, использование изображения в <canvas> ограничивается всегда. При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
height	pixels	Определяет высоту изображения.
hspace	pixels	Не поддерживается в HTML5. Определяет пробелы слева и справа от изображения.
ismap	ismap	Сообщает браузеру, что изображение является серверной картой-изображением.
longdesc	URL	Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt, описания изображения).
src	URL	Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом.
usemap	#mapname	Ссылается на элемент <map>, содержащий координаты для клиентской части карты-изображения.
vspace	pixels	Не поддерживается в HTML5. Определяет пробелы сверху и снизу изображения.
width	pixels	Определяет ширину изображения.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега <img></title>
</head>
<body>
<img src = “10.jpg” alt = “ничоси” width = “200” height = “200” title = “ничоси”>
</body>
</html>

Результат добавления изображения, с помощью тега <img> на HTML страницу:

Пример использование тега <img> в HTML документе.

Изображение как ссылка

Допускается использование изображения в качестве ссылки, для этого необходимо поместить наше изображение (тег <img>) между отрывающим и закрывающим тегом <a>:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования изображения в качестве ссылки</title>
</head>
<body>
<a href = “https://yandex.ru”>
<img src = “10.jpg” alt = “Поиск в Яндекс”>
</a>
</body>
</html>

При этом при клике по картинке будет осуществлён переход по заданой ссылке (в нашем случае откроется сайт компании Яндекс):

Поиск

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка атрибутов align, border, hspace, vspace.

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

img {
display: inline-block;
}

Поддержка глобальных атрибутов

Элемент поддерживает “глобальные атрибуты”.

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

Элемент поддерживает “атрибуты событий”.

HTML теги

Источник

imgChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даalign

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаaltChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даborder

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаcrossoriginChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаdecodingChrome
Полная поддержка

ДаEdge
Полная поддержка

≤79Firefox
Полная поддержка

63IE
Нет поддержки

НетOpera
Полная поддержка

ДаSafari
Полная поддержка

11.1WebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

63Opera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

11.3Samsung Internet Android
Полная поддержка

ДаheightChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даhspace

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даintrinsicsize

ЭкспериментальнаяНестандартная

Chrome
Полная поддержка

Отключено

Полная поддержка

Отключено

Отключено From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.Edge
Полная поддержка

≤79

Отключено

Полная поддержка

≤79

Отключено

Отключено From version ≤79: this feature is behind the #enable-experimental-productivity-features preference.Firefox
?IE
Нет поддержки

НетOpera
Полная поддержка

58Safari
Нет поддержки

НетWebView Android
Нет поддержки

НетChrome Android
Полная поддержка

Отключено

Полная поддержка

Отключено

Отключено From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.Firefox Android
?Opera Android
Полная поддержка

50Safari iOS
Нет поддержки

НетSamsung Internet Android
Нет поддержки

НетismapChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даloading

Экспериментальная

Chrome
Полная поддержка

76Edge
Полная поддержка

79Firefox
Полная поддержка

75IE
Нет поддержки

НетOpera
Полная поддержка

63Safari
Нет поддержки

Нет

Замечания

Нет поддержки

Нет

Замечания

Замечания See bug 196698WebView Android
Нет поддержки

НетChrome Android
Полная поддержка

76Firefox Android
Нет поддержки

Нет

Замечания

Нет поддержки

Нет

Замечания

Замечания See bug 1542784Opera Android
Полная поддержка

54Safari iOS
Нет поддержки

Нет

Замечания

Нет поддержки

Нет

Замечания

Замечания See bug 196698Samsung Internet Android
Нет поддержки

НетlongdescChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даname

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даonerror

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

≤79Firefox
Полная поддержка

51IE
?Opera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

51Opera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаreferrerpolicyChrome
Полная поддержка

51Edge
Полная поддержка

79Firefox
Полная поддержка

50IE
Нет поддержки

НетOpera
Полная поддержка

38Safari
Полная поддержка

11.1WebView Android
Полная поддержка

51Chrome Android
Полная поддержка

51Firefox Android
Полная поддержка

50Opera Android
Полная поддержка

41Safari iOS
Нет поддержки

НетSamsung Internet Android
Полная поддержка

7.2sizesChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаsrcChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаsrcsetChrome
Полная поддержка

34Edge
Полная поддержка

≤18Firefox
Полная поддержка

38
Полная поддержка

38
Нет поддержки
32 — 52

Отключено

Отключено From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.IE
Нет поддержки

НетOpera
Полная поддержка

21Safari
Полная поддержка

8WebView Android
Полная поддержка

37Chrome Android
Полная поддержка

34Firefox Android
Полная поддержка

38
Полная поддержка

38
Нет поддержки
32 — 52

Отключено

21Safari iOS
Полная поддержка

8Samsung Internet Android
Полная поддержка

2.0usemapChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Даvspace

Устаревшая

Chrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

ДаwidthChrome
Полная поддержка

ДаEdge
Полная поддержка

12Firefox
Полная поддержка

ДаIE
Полная поддержка

ДаOpera
Полная поддержка

ДаSafari
Полная поддержка

ДаWebView Android
Полная поддержка

ДаChrome Android
Полная поддержка

ДаFirefox Android
Полная поддержка

ДаOpera Android
Полная поддержка

ДаSafari iOS
Полная поддержка

ДаSamsung Internet Android
Полная поддержка

Да

Источник