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

Ширина и высота картинки в HTML

Навчіться правильно задавати ширину та висоту зображень і розуміти, коли картинка може спотворюватися.

Ширина і висота картинки в HTML

У HTML можна одночасно задавати ширину та висоту зображення за допомогою атрибутів width і height.

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

Спотворення зображення

Наприклад, якщо оригінальна картинка квадратна, а ми задаємо різні значення width і height, браузер змусить її відповідати цим розмірам.

<!-- Картинка буде розтягнута -->

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

У цьому випадку ширина буде 100 пікселів, а висота 70 пікселів. Через різницю пропорцій зображення буде виглядати спотвореним.

Правильне співвідношення сторін

Якщо ширина і висота мають однакові пропорції, картинка зменшиться або збільшиться без спотворення.

<!-- Пропорції збережені -->

<img
  src="smile.png"
  width="100"
  height="100"
>
ПрикладРезультат
width="100" height="70"❌ Зображення може спотворитися
width="100" height="100"✅ Пропорції збережені
Тільки width✅ Висота підлаштовується автоматично
Тільки height✅ Ширина підлаштовується автоматично

Сучасний підхід

У сучасній верстці розміри зображень частіше контролюють за допомогою CSS. Це дозволяє створювати адаптивні сайти для різних екранів.

.image {
  width: 100%;
  height: auto;
}
❗ Важливо:

Не задавайте width і height навмання. Якщо потрібно зберегти пропорції — змінюйте тільки один розмір або використовуйте CSS з height: auto.

📌 Завдання:
  1. Встановіть ширину і висоту картинки так, щоб пропорції зображення спотворилися.
  2. Потім встановіть width і height так, щоб пропорції залишилися правильними.
  3. Порівняйте результат у браузері.
💡 Показати підказку

Для спотворення використовуйте різні пропорції, наприклад width="200" height="50". Для правильного відображення використовуйте однакові значення або пропорційні розміри.

✅ Показати відповідь
Спотворення:

<img 
  src="smile.png"
  width="200"
  height="50"
>


Без спотворення:

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