Атрибут width тега <img> — ширина зображення

Атрибут 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	3	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Правильно: width і height у пропорції файлу.</p>
<img src="/img/logo.png" width="413" height="56" alt="Логотип css.in.ua">

<p>Помилка: висоту поставили навмання — картинку сплющило.</p>
<img src="/img/logo.png" width="413" height="140" alt="Те саме лого зі спотвореною пропорцією">

<p>CSS міняє показаний розмір, але пропорцію рятує height: auto.</p>
<img class="fluid" src="/img/logo.png" width="826" height="112" alt="Те саме лого на всю ширину контейнера">

img {
    border: 1px solid #99aaaa;
    background: #f2f5f5;
}

.fluid {
    max-width: 100%;
    height: auto;   /* без цього атрибут height лишиться жорстким */
}

p {
    margin: 1rem 0 0.3rem;
    color: #6b7280;
}

<p>У цьому прикладі, Ви можете змінювати значення для властивості width в межах від 0 до 1000 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="1000" step="1" value="200" id="range" onmousemove="f()"> 

<hr>

<div class="block1">
  <p> З використанням атрибута width  
  </p>
  <p class = "text"  style ="color:#c500c5">
    <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст" height="100"/> 

</div>

<div class="block2">
  
 <p> Без використанням атрибута width
  </p>
  <p style ="color:#c500c5">
<img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/>
</div>

*{
  text-align:center;
}

.block1 ,.block2{
  border: 1px solid;
  float:left;
  padding:20px;
}

text.innerHTML = "Поточна ширина зображення : 200";
function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("image");
  var text = document.getElementById("text");

  element.setAttribute("width", range);
  text.innerHTML = "Поточна ширина зображення :" + range;
}
//# sourceURL=pen.js

<img src="/img/logo.svg" width="120" alt="120 пікселів">
<img src="/img/logo.svg" style="width: 50%" alt="50% ширини контейнера">