Урок 18 із 239
8%
← Назад

Висота картинки в HTML

Навчіться змінювати висоту зображення за допомогою атрибута height.

Висота картинки в HTML

Окрім ширини зображення, у HTML можна змінювати і його висоту. Для цього використовується атрибут height.

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

Атрибут height

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

<img src="smile.png" height="100">

У цьому прикладі висота картинки буде 100 пікселів, а ширина автоматично підлаштується так, щоб зображення не спотворилося.

АтрибутЩо змінює
srcШлях до файлу зображення
widthШирину картинки
heightВисоту картинки
<!-- Зображення висотою 100px -->

<img
  src="smile.png"
  height="100"
  alt="Смайлик"
/>

Width і height разом

Можна задавати одночасно ширину і висоту, але якщо пропорції будуть неправильними, картинка може розтягнутися або стиснутися.

<!-- Може спотворити зображення -->

<img
  src="smile.png"
  width="300"
  height="100"
/>
❗ Важливо:

Якщо потрібно змінити розміри зображень у сучасних сайтах, частіше використовують CSS. Атрибути width і height у HTML потрібні для базового розуміння.

📌 Завдання:
  1. Візьміть картинку з попередніх уроків.
  2. Додайте атрибут height.
  3. Встановіть висоту зображення 100 пікселів.
  4. Перевірте результат у браузері.
💡 Показати підказку

Запишіть height як число: height="100". Не додавайте px у HTML-атрибут.

✅ Показати відповідь
Приклад:

<img
  src="smile.png"
  height="100"
  alt="Смайлик"
/>