html тег <img> атрибут width
Атрибут width визначає ширину зображення у пікселях або відсотках.
Якщо встановлений процентний запис, то розміри зображення обчислюються відносно батьківського елементу - контейнера, де знаходиться елемент <img>.
У разі відсутності батьківського контейнера, в його якості виступає вікно браузера. Іншими словами, width="100%" означає, що малюнок буде розтягнутий на всю ширину веб-сторінки.
- Порада
-
Завжди вказуйте атрибути height та width для зображень. Якщо висота і ширина встановлені, простір необхідний для зображення буде резервовано при завантаженні сторінки. Без цих атрибутів, браузер не знає розмір зображення, і не може зарезервувати відповідний простір для нього. Тоді при завантаженні сторінки ви будете спостерігати ефект змінювання макету сторінки допоки зображення повністю не завантажиться.
автор: с3с - Порада
-
Зменшення розміру великого зображення за допомогою атрибутів height та width змушує користувача завантажити велике зображення (навіть якщо воно виглядає маленьким на сторінці). Щоб уникнути цього, треба зменшити масштаб зображення за допомогою ПЗ, перш ніж використовувати його на сторінці.
автор: с3с - Порада
-
Додавання тільки одного атрибута width або height зберігає пропорції і відношення сторін зображення.
автор: с3с
Синтаксис
<img wigth=”pixels | %”>Атрибут width може отримувати 2 значень:
-
pixels -
Ширина у пікселях (наприклад, weigth="100").
автор: с3с -
percent -
Ширина у відсотках (наприклад, weigth="100%").
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1+ | 1+ | 1+ | 12+ | 1+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад встановлення width теґа <img> в пікселях.
See the Pen img.Width_css_in_ua by css.in.ua (@css_in_ua) on CodePen.
автор: с3сАтрибут width приймає лише пікселі — перше лого рівно 120px. Відсотки — це вже CSS: друге лого займає половину ширини контейнера і масштабується разом із вікном.
<img src="/img/logo.svg" width="120" alt="120 пікселів">
<img src="/img/logo.svg" style="width: 50%" alt="50% ширини контейнера">Різниця між HTML 4.01 та HTML5
В HTML 4.01, атрибут width може бути визначений в пікселях або в %.
У HTML5 значення повинно бути тільки в пікселях.
Різниця між XHTML та HTML
Коментарі
Коментарів ще немає — будьте першим!