HTML Тег <img>
Приклад
Як вставити зображення:
<img src="../images/img_girl.jpg" alt="Дівчина в жакеті" width="500" height="600">
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <img> використовується для вставлення зображення на сторінку HTML.
Зображення технічно не вставляються на вебсторінку; зображення пов’язані з вебсторінками. Тег <img> створює простір для зберігання зображення, на яке посилається.
Тег <img> має два обов’язкові атрибути (згідно специфікації HTML5):
- src - Вказує шлях до зображення
- alt - Визначає альтернативний текст для зображення, якщо зображення з якоїсь причини не може бути відображено
Примітка: Крім того, завжди вказуйте ширину та висоту зображення. Якщо ширину та висоту не вказано, сторінка може мерехтіти під час завантаження зображення.
Порада: Щоб пов’язати зображення з іншим документом, просто вставте тег <img> у тег <a> (див. приклад нижче).
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <img> | Yes | Yes | Yes | Yes | Yes |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| alt | text | Визначає альтернативний текст для зображення |
| crossorigin | anonymous use-credentials |
Дозволити використання зображень зі сторонніх сайтів, які дозволяють перехресний доступ, із canvas |
| height | pixels | Визначає висоту зображення |
| ismap | ismap | Визначає зображення як карту зображення на стороні сервера |
| loading | eager lazy |
Визначає, чи має браузер завантажувати зображення негайно чи відкладати завантаження зображень до виконання певних умов |
| longdesc | URL | Вказує URL-адресу докладного опису зображення |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Визначає, яку інформацію про реферера використовувати під час отримання зображення |
| sizes | sizes | Визначає розміри зображень для різних макетів сторінок |
| src | URL | Вказує шлях до зображення |
| srcset | URL-list | Визначає список файлів зображень для використання в різних ситуаціях |
| usemap | #mapname | Визначає зображення як карту зображень на стороні клієнта |
| width | pixels | Визначає ширину зображення |
Глобальні атрибути
Тег <img> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <img> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Вирівнювання зображення (за допомогою CSS):
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
Спробуйте самі »
Приклад
Додати рамку (межі) зображення (за допомогою CSS):
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">
Спробуйте самі »
Приклад
Додайте ліве та праве поля до зображення (за допомогою CSS):
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
Спробуйте самі »
Приклад
Додайте верхнє та нижнє поля до зображення (за допомогою CSS):
<img src="../images/smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
Спробуйте самі »
Приклад
Як вставити зображення з іншої теки або з іншого вебсайту:
<img src="../images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
Спробуйте самі »
Приклад
Як додати гіперпосилання до зображення:
<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
Спробуйте самі »
Приклад
Як створити карту зображення з регіонами, які можна натиснути. Кожен регіон є гіперпосиланням:
<img src="../images/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Спробуйте самі »
Пов’язані сторінки
HTML підручник: HTML Зображення
HTML DOM довідник: Об’єкт Image
CSS підручник: Стилізація зображень
CSS налаштування за замовчуванням
Більшість браузерів будуть відображати елемент <img> за допомогою наступних значень за замовчуванням:
