Атрибут width

Оновлено: 20.06.2022

Атрибут width

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

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

Ширину та висоту зображення можна змінювати як у менший, так і в більший бік. Однак на швидкість завантаження малюнка це не впливає, оскільки розмір файлу залишається незмінним. При цьому якість зображення може погіршитись.

Синтаксис

<img width="<значення>">

Значення

Будь-яке ціле додатнє число в пікселях або відсотках.

Значення за замовчуванням

Вихідна ширина зображення.

Приклад

Браузери

img:width

Переглянути сумісність з Can I use?

img:width