Робота з картинками в HTML і CSS

Цей урок присвячений темі як вставити картинку в HTML і які стилі CSS найбільш часто застосовуються для зображень. Тут ми розглянемо всі основні питання стосовно вставки і відображення картинки в веб-документі. А також розглянемо причини чому у деяких користувачів не відображається картинка в HTML.

Зміст:

  1. Як вставити картинку в HTML
  2. Як змінити розмір картинки в HTML
  3. Як вказати шлях до файлу зображення
  4. Як зробити картинку посиланням
  5. Як поставити на фон картинку
  6. Як встановити розмір картинки в CSS
  7. Як зробити картинку адаптивною
  8. Як розмістити текст на зображенні
  9. Як вирівняти зображення по центру веб-сторінки
  10. Як зробити обтікання картинки текстом
  11. Як розмістити картинки в ряд
  12. Як змінити розмір зображення при наведенні на нього курсора миші
  13. Чому не відображається картинка в HTML

Як вставити картинку в HTML

В HTML зображення в графічному форматі (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) додаються на веб-сторінку за допомогою тега <img> через атрибут src, в якому вказується адреса картинки. Тобто атрибут src є обов'язковим для елемента <img>. Без нього цей тег не використовують.

Ще одним обов'язковим атрибутом елемента <img> являється alt. Цей атрибут використовують на той випадок, якщо з якої-небудь причини, браузер не зможе відобразити картинку. При його використанні, в місці відображення картинки на екран буде виведене зазначене слово.

У таблиці нижче представлені атрибути тега <img>, котрі використовуються найбільш часто. Але насправді їх набагато більше, адже для елемента <img> доступні всі універсальні атрибути і події.

Таблиця. Основні атрибути елемента <img>

Атрибут Опис Приклад
alt Додає альтернативний текст для зображення. Цей текст виводиться в місці появи зображення до його завантаження, або якщо картинка не може бути завантажена (Наприклад, при відключеній графіці, або коли вказано невірний шлях до зображення). <img src="/D-Nik-Webmaster.jpg" alt="Тут має бути картинка">
height Висота зображення в пікселях (px). Якщо задати висоту зображення і при цьому не вказувати ширину, то картинка буде стиснута пропорційно. <img src="/D-Nik-Webmaster.jpg" height="300">
src Задає шлях до зображення. <img src="/D-Nik-Webmaster.jpg">
sizes Задає розмір зображення в залежності від параметрів відображення (розміри зображення для різних макетів сторінки.
Працює тільки при заданому атрибуті srcset.
Значенням атрибута є один або кілька рядків, зазначених через кому.
Як значення можна використовувати одиниці em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, але не проценти.
sizes="
(max-width: 20em) 30vw,
(max-width: 30em) 60vw,
(max-width: 40em) 90vw"
Тут vw — це ширина у відсотках від області перегляду.
srcset Створює список джерел для зображення, які будуть обрані, виходячи з розширення екрану. Може використовуватися разом з атрибутом src, або замість нього. Значенням цього атрибута є один або кілька рядків, розділених комою.

srcset="
img/logo-mobile.jpg 320w,
img/logo-wide-mobile.jpg 480w,
img/logo-tablet.jpg 768w,
img/logo-desktop.jpg 1024w,
img/logo-hires.jpg 1280w"

Тут w - дескриптор ширини, який являє собою ціле позитивне число, за яким слідує w.

width Ширина зображення. Якщо задати ширину зображення і при цьому не вказувати висоту, то картинка буде стиснута пропорційно. <img src="/D-Nik-Webmaster.jpg" width="300">

HTML картинка. Приклади

Як додати картинку в HTML?

Як вже говорилося, щоб додати картинку в HTML потрібно використовувати тег <img> і його обов'язкові атрибути src та alt. Також, оскільки тег <img> – це рядковий елемент, то його рекомендується розташовувати всередині якогось блочного елемента. Наприклад, <p> або <div>.

<p><img src="/D-Nik-Webmaster.jpg" alt="Тут повинна бути картинка"></p>

Як змінити розмір картинки в HTML?

Щоб змінити розмір зображення використовують атрибути height (задає висоту картинки) і width (задає ширину картинки). Ці атрибути можна вказувати як разом, так і окремо.

Якщо потрібно пропорційно стиснути картинку, то вказується тільки один атрибут (height, або width). Якщо ж потрібно чітко визначити висоту й ширину картинки, то використовують обидва атрибута одночасно (height і width).

<p><img src="/D-Nik-Webmaster.jpg" height="300" width="300"></p>

Як вказати шлях до файлу зображення в HTML?

Адреса посилання на файл зображення може бути абсолютною і відносною.

Абсолютний шлях показує точне місцезнаходження файлу, а відносний показує шлях до файлу відносно будь-якої «відправної точки».

Приклади:

https://site/img/D-Nik-Webmaster.jpg – це абсолютна адреса файлу D-Nik-Webmaster.jpg так як шлях до нього вказаний повністю.

/img/D-Nik-Webmaster.jpg – це відносний шлях від кореневого каталогу. Знак «/» на самому початку вказує на те, що це корінь каталогу і вище по директорії підніматися не можна. Якщо файл index.html (HTML-документ) знаходиться в каталозі site, то цей каталог буде кореневим («відправною точкою»).

../img/D-Nik-Webmaster.jpg – це відносний шлях від документа. Дві точки на самому початку означають, що вам потрібно піднятися на один каталог вгору. Таким чином, якщо дивитися на наш приклад, то потрібно піднятися на 1 директорію вгору, знайти там папку img, а в ній знайти файл D-Nik-Webmaster.jpg.

../../D-Nik-Webmaster.jpg – вказує шлях до файлу, але тільки з підняттям на 2 директорії вгору.

Як зробити картинку посиланням в HTML

Для того, щоб зробити картинку посиланням в HTML потрібно вміст елемента <img> обрамити в тег <a>.

<p><a href="https://d-nik.pro"><img src="/D-Nik-Webmaster.jpg" alt="Картинка тут"></a></p>

Картинка CSS. Приклади

Використання CSS (каскадних таблиць стилів) дає можливість більш гнучко, більш зручно і ефективно, налаштовувати відображення картинок на веб-сторінці. Тому навіть для того, щоб задати ширину і висоту зображень веб-майстри часто використовують саме каскадні таблиці стилів.

Давайте розглянемо кілька найпоширеніших прикладів оформлення зображень на веб-сторінці за допомогою CSS.

Як поставити на фон картинку в HTML?

Щоб встановити зображення в якості фону потрібно задати селектору body властивість background, або background-image.

Наприклад:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body{
            background: url('img/bg.jpg'); /* шлях до файлу зображення, яке буде використовуватися в якості фону */
        }
    </style>

    <title>Як поставити на фон картинку в HTML</title>
</head>
<body>
    <p>Тут буде написаний якийсь текст</p>
</body>
</html>

Як встановити розмір картинки в CSS

Щоб задати розмір картинки в CSS потрібно використовувати властивості width (ширина) і height (висота). Наприклад:

  1. Давайте створимо новий клас imgsize.
  2. Для елементів цього класу пропишемо властивість width рівною 350px.
  3. Задамо зображенню створений раніше клас imgsize.

Таким чином, ширина картинки буде дорівнювати 350px, а висота зменшиться пропорційно. Якщо потрібно встановити фіксовану ширину і висоту картинки, то можна додати властивість height (Наприклад, height: 350px).

Приклад коду:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .imgsize{
            width: 350px; /* ширина картинки буде 350px*/
            height:350px  /* висота картинки буде 350px*/
        }
    </style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
    <p><img class="imgsize" src="/img/bg.jpg" alt="Картинка">Тут буде написаний якийсь текст</p>
</body>
</html>

Як зробити зображення адаптивним

Адаптивність картинки – це можливість зображення однаково відображатися на різних типах пристроїв з різними характеристиками. Наприклад, на комп'ютерах з різним розширенням екрану монітора, ноутбуках з різним розширенням дисплея, планшетах, телефонах і т.д.

Найпростіший спосіб зробити однакове відображення картинки на всіх пристроях – це використовувати такі правила:

img {
  width: 100%;
  height: auto;
}

Як розмістити текст на зображенні

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Картинку і текст поміщаємо в контейнер */
	.container {
		position: relative;
		text-align: center;
		color: white;
	}
	/* Стилі для тексту */
		.text-block {
		position: absolute;
		bottom: 8px;
		left: 16px;
	}
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<div class="container">
		<img src="/img/bg.jpg" alt="Картинка" style="width:100%;">
		<div class="text-block">Це наш текст</div>
	</div>
</body>
</html>

Як вирівняти картинку по центру веб-сторінки

Спосіб №1

Найпростіший спосіб вирівняти картинку по центру – це присвоїти зображенню клас, зробити картинку блоком і задати їй автоматичне вирівнювання з правої і лівої частини.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Спосіб 1 */
	.center-img {
		display: block;
		margin: 0 auto;
	}
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
		<img class="center-img" src="/img/logo.jpg" alt="Картинка">
</body>
</html>

Спосіб №2

Розміщуємо картинку в блоці <div> або параграфі <p>, присвоюємо клас цьому блоку (або параграфу), і встановлюємо правило вирівнювання тексту по центру.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Спосіб 2 */
	.pull-center {
		text-align:center;
	}
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<div class="pull-center">
		<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Як зробити обтікання картинки текстом

Вирівняти зображення по лівому, або по правому краю веб-сторінки (або якого-небудь блоку, контейнера) можна за допомогою властивості float.

Таким чином, щоб зробити обтікання картинки текстом зліва чи зправа потрібно прописати наступні правила:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.leftimg {
                 float:left; /* Вирівнювання по лівому краю */
                 margin: 0 10px 10px 0; /* Відступи навколо картинки */
              }
              .rightimg  {
                float: right; /* Вирівнювання по правому краю  */ 
                margin: 0 0 10px 10px; /* Відступи навколо картинки */
              }
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<h2>Приклад вирівнювання картинки по лівому краю і обтікання її текстом зправа</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 1" width="120px" height="120px" class="leftimg">
    Якщо ти зараз читаєш мою книгу, або переглядаєш цей матеріал на сайті www.d-nik.pro, значить, тебе цікавить створення сайтів для початківців з нуля. І так як HTML є найважливішою складовою кожної веб-сторінки в інтернеті, вивчення ми почнемо саме з цієї мови.</p>
	<p>Тут хочу відзначити, що HTML не є мовою програмування. Це мова гіпертекстової розмітки. Тому, в ході прочитання даної книги, термін «мова HTML» буде зустрічатися тобі дуже часто, але потрібно розуміти, що на HTML не програмують.</p>
	<p>Головне завдання HTML – відобразити у вікні браузера певні дані. За допомогою цієї мови веб-розробники виводять на сторінці сайту такі елементи як: посилання, кнопки, поля для введення тексту, таблиці, картинки, відео, статті та інше.</p>
    <h2>Приклад вирівнювання картинки по правому краю і обтікання її текстом зліва</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 2" width="120px" height="120px" class="rightimg">
    Але за допомогою HTML не можна зробити ніяких обчислювальних операцій (Наприклад, скласти два числа, або зробити їх множення і т.д.).</p>
	<p>Звідси і висновок. Завдання мови програмування – обробка даних. А завдання HTML – відображення даних. Ось тому HTML і не є мовою програмування.</p>
	<p>Хоча, як і будь-яка інша мова програмування, HTML має свій синтаксис, семантику і лексику. І знання HTML дозволяє створювати сайти з нуля. Навіть на чистому HTML (без використання CSS і JavaScript) можна створити цілком пристойний, односторінковий сайт. Хоча звичайно ж зробити це використовуючи все разом (HTML, CSS і JavaScript) буде набагато простіше.</p>
	<p>Але я вважаю, що для того, щоб навчитися створювати свої власні сайти з нуля, потрібно знати основи-основ – а це якраз і є мова HTML.</p>
</body>
</html>

Як розмістити картинки в ряд

Щоб розмістити картинки по горизонталі в один ряд, потрібно помістити їх в блок <div> або параграф <p>, привласнити клас цьому блоку (або параграфу), і встановити такі правила:

.img-line {
		border: 2px solid #55c5e9; /* Рамка навколо зображення */
		padding: 15px; /* Відстань від картинки до рамки */
		background: #666; /* Колір фона */
		margin-right: 10px; /* Відступ зправа */
		margin-bottom: 10px; /* Відступ знизу */
    }

 Весь код буде виглядати так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-line {
		border: 2px solid #55c5e9; /* Рамка навколо зображення */
		padding: 15px; /* Відстань від картинки до рамки */
		background: #666; /* Колір фона */
		margin-right: 10px; /* Відступ зправа */
		margin-bottom: 10px; /* Відступ знизу */
    }
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<p class="img-line">
	<img src="/img/logo.jpg" alt="Зображення 1" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Зображення 2" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Зображення 3" width="120px" height="120px">
	</p>
</body>
</html>

Як змінити розмір зображення при наведенні на нього курсора миші

Зображення можна масштабувати (змінювати його розмір), обертати, зрушувати, або нахиляти за допомогою властивості transform. А для регулювання швидкості анімації використовується властивість transition.

Наприклад, якщо нам потрібно, щоб картинка збільшувалася (або зменшувалася) при наведенні на неї курсора миші, то потрібно створити клас, привласнити його зображенню і прописати наступні правила CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
		transition: 1s; /* Час ефекту  */		
    }
	.img-scale:hover {
		transform: scale(1.2); /* Збільшуємо масштаб */		
    }
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<img src="/img/logo.jpg" alt="Картинка" class="img-scale">
</body>
</html>

Якщо потрібно збільшити зображення, не збільшуючи при цьому розміри картинки, то картинку треба помістити в блок <div>. Для цього блоку задати властивість display зі значенням inline-block, щоб <div> став розміром з зображення; а також задати властивість overflow зі значенням hidden, щоб все ховалося за межами блоку <div>.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
    display: inline-block; /* Рядково-блоковий елемент */
    overflow: hidden; /* Приховуємо все за контуром */
   }
   .img-scale img {
    transition: 1s; /* Час ефекту */
    display: block; /* Прибираємо невеликий відступ знизу */
   }
   .img-scale img:hover {
    transform: scale(1.2); /* Збільшуємо масштаб */
   }
	</style>

    <title>Як вставити картинку в HTML</title>
</head>
<body>
	<div class="img-scale">
	<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Чому не відображається картинка в HTML?

Причин чому картинка не відображається на веб-сторінці може бути кілька:

  1. Неправильна адреса файлу. Найчастіше, картинка на сайті не показується через те, що в HTML коді вказано хибний шлях до файлу зображення. Особливо уважним треба бути при зазначенні відносного шляху до файлу. Про те, як вказати цей шлях правильно ми вже говорили раніше. Тому повторюватися не будемо.
  2. Розбіжність регістра, або неправильне ім'я файлу. З неправильним ім'ям файлу думаю все зрозуміло. Якщо картинка не відображається, то насамперед перевірте чи правильно ви написали ім'я файлу цього зображення. Також, вказуючи шлях до файлу, обов'язково потрібно дотримуватися регістру букв (маленькі букви писати маленькими, великі – великими). Адже якщо в якості операційної системи веб-сервера виступає Unix-подібна система, то вона розрізняє регістр символів. Тому файли logo.jpg і Logo.jpg (або loGo.jpg) ця система буде розпізнавати як два абсолютно різних файлу. Ось чому я рекомендую постійно писати імена файлів дотримуючись регістру букв.
  3. Різниця додавання картинок в HTML-документ на локальному комп'ютері і веб-сервері. У багатьох користувачів на веб-сервері, шлях /img/logo.jpg відмінно працює. А ось на локальному комп'ютері шлях до картинки потрібно писати без слеша на самому початку – img/logo.jpg. Cимвол слеш (/) перед ім'ям файлу або папки говорить про те, що відлік повинен вестися від кореня сайту. Відповідно, шлях /img/logo.jpg слід розуміти так: в корені сайту знаходиться папка з ім'ям img, а в ній розташовується файл logo.jpg. А ось на локальному комп'ютері браузер буде інтерпретувати такий шлях як c:/img/logo.jpg, що є помилкою. Адже такої папки у нас немає.

АВТОРИЗАЦІЯ