Атрибут height тега <img> — висота зображення

правити

Загальний опис

правити

Порада

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

автор: с3с правити

Порада

При зміні розміру великого зображення за допомогою атрибутів height та wigth користувач все одно завантажить велике зображення (навіть якщо воно виглядає маленьким). Щоб уникнути цього, треба зменшити масштаб зображення за допомогою вашого програмного забезпечення, перш ніж використовувати його на сторінці.

автор: с3с правити

Порада

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

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<img height=”pixels | %”>

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

pixels

Висота у пікселях (наприклад, height="100").

автор: с3с

правити

percent(%)

Висота у процентах (наприклад, height="20%").

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

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

Переглядач
	1	1	3	15	12	≤11

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

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

Приклади

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

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

<hr>

<div class="block1">
  <p> З використанням атрибута height  
  </p>
  <p class = "text"  style ="color:#c500c5">
    <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' 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> Без використанням атрибута height
  </p>
  <p style ="color:#c500c5">
<img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' 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;
}

img{
  Width:50%;
}

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

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

<h3>Лише height — пропорції збережено</h3>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23e0e7ff'/%3E%3Ccircle cx='50' cy='50' r='45' fill='%232563eb'/%3E%3C/svg%3E" height="110" alt="Синє коло">

<h3>height і width у чужому співвідношенні</h3>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23e0e7ff'/%3E%3Ccircle cx='50' cy='50' r='45' fill='%232563eb'/%3E%3C/svg%3E" height="110" width="260" alt="Те саме коло, розтягнуте в овал">

h3 { font-size: 15px; margin: 12px 0 6px; }
img { border: 2px dashed #94a3b8; }