Особливості тегу img у HTML верстці

Привіт:) У цьому пості я зібрав деякі основні особливості тегу <img> у верстці.

height та width

Для зміни розмірів зображення засобами HTML передбачені атрибути height та width. Дозволяється використовувати значення у пікселях або відсотках. Якщо встановлено процентний запис, розміри зображення обчислюються відносно батьківського елемента — контейнера, де знаходиться елемент <img>. У разі відсутності батьківського контейнера його роль відіграє вікно браузера. Іншими словами, width=100% означає, що зображення буде розтягнуте на всю ширину веб-сторінки. Додавання лише одного атрибута width або height зберігає пропорції та співвідношення сторін зображення. Браузер при цьому очікує на повне завантаження картинки, щоб визначити її початкову висоту та ширину. Якщо розмірів не задавати, то картинка відобразиться у повному розмірі.

<img> є елементом, що заміщується. За замовчуванням він має значення display: inline, але його розміри за замовчуванням визначаються внутрішніми значеннями вбудованого зображення. Ви можете встановити для зображення такі властивості, як border/border-radius, padding/margin, width/height і так далі.

Однак, часто буває корисно встановити для зображень властивість display: block. Таким чином ви маєте максимальний контроль над стилізацією (наприклад, margin: 0 auto не працює на зображеннях з display: inline, легше розміщувати зображення у контексті із сусідніми елементами, коли вони є блоковими).

У <img> немає базової лінії, коли зображення використовуються в ситуації із рядковим форматуванням (display: inline) разом із vertical-align: baseline. Нижня межа зображення буде розміщена на базовій лінії контейнера.

Ви можете використовувати властивість object-position для позиціонування зображення всередині меж елемента <img> і властивістю object-fit регулювати розміри зображення всередині цих меж (наприклад, чи має зображення розміщуватися в межах елемента або заповнити елемент повністю, навіть якщо буде потрібне обрізання).

Залежно від типу, зображення може мати власні (внутрішні) ширину та висоту. Для деяких типів зображень внутрішні розміри не обов'язкові. SVG-зображення, наприклад, можуть не мати внутрішніх розмірів, якщо для кореня їх елемента не задані width і height.

Якщо для картинки не задані ні ширина, ні висота, зображення матиме свій реальний розмір. Якщо задана висота, картинка стане заданої висоти, а по ширині підлаштується так, щоб її пропорції збереглися.

Якщо задана лише ширина, картинка підлаштовується за висотою так, щоб зберегти пропорції.

Якщо задані ширина та висота, пропорції картинки можуть бути спотворені (а може й ні, як вгадаєте). Якщо ширина або висота (або обидва разом) більша за реальну, картинка збільшиться, але втратить у якості.

Рекомендується задавати ширину і висоту картинок в атрибутах (а не через CSS). У цьому випадку браузер швидше завантажуватиме зображення — йому немає потреби обчислювати розмір кожної картинки після її отримання.

Не рекомендується зменшувати реальні розміри зображення без необхідності. Наприклад, реальний розмір картинки 1000 на 1000 пікселів, а ви задасте їй ширину 100px. У цьому випадку картинка на екрані виглядатиме на 100 пікселів, однак матиме розмір на всю тисячу і, відповідно, завантажуватиметься набагато довше.