html атрибут width

Атрибут width визначає ширину зображення у пікселях або відсотках.

Не вдалось завантажити зображення

Якщо встановлений процентний запис, то розміри зображення обчислюються відносно батьківського елементу - контейнера, де знаходиться елемент <img>.

У разі відсутності батьківського контейнера, в його якості виступає вікно браузера. Іншими словами, width="100%" означає, що малюнок буде розтягнутий на всю ширину веб-сторінки.

Порада:	Завжди вказуйте атрибути height та width для зображень. Якщо висота і ширина встановлені, простір необхідний для зображення буде резервовано при завантаженні сторінки. Без цих атрибутів, браузер не знає розмір зображення, і не може зарезервувати відповідний простір для нього. Тоді при завантаженні сторінки ви будете спостерігати ефект змінювання макету сторінки допоки зображення повністю не завантажиться.
Порада:	Зменшення розміру великого зображення за допомогою атрибутів height та width змушує користувача завантажити велике зображення (навіть якщо воно виглядає маленьким на сторінці). Щоб уникнути цього, треба зменшити масштаб зображення за допомогою ПЗ, перш ніж використовувати його на сторінці.
Порада:	Додавання тільки одного атрибута width або height зберігає пропорції і відношення сторін зображення.

Синтаксис

<img wigth=”pixels | %”>

Атрибут width може отримувати 2 значення :

pixels: Ширина у пікселях (наприклад, weigth="100").
percent: Ширина у відсотках (наприклад, weigth="100%").

Переглядач
	1	1+	1+	1+	1+	12+

Переглядач
	1+	1+	1+	1+

Мобільних переглядачів ще не додано.

Приклади

Приклад 1
Приклад 2

Приклад встановлення width теґа <img> в пікселях.




  See the Pen 


  img.Width_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Приклад встановлення width теґа <img> в % (відсотках).

<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="html,result" data-user="css_in_ua" data-slug-hash="momRjJ" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="img.WidthPX_css_in_ua">


  <span>See the Pen <a href="https://codepen.io/css_in_ua/pen/momRjJ/">


  img.WidthPX_css_in_ua</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)


  on <a href="https://codepen.io">CodePen</a>.</span>


</p>


<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Різниця між HTML 4.01 та HTML5

В HTML 4.01, атрибут width може бути визначений в пікселях або в %.

У HTML5 значення повинно бути тільки в пікселях.

Різниця між XHTML та HTML

Немає жодної різниці.

HTML довідник

HTML Теґи