Урок 17 із 239
7%
← Назад

Ширина картинки в HTML

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

Ширина картинки в HTML

За замовчуванням браузер показує зображення у його реальному розмірі. Наприклад, якщо картинка має розмір 130×130 пікселів, саме такого розміру вона буде відображатися на сторінці.

Але іноді потрібно змінити розмір зображення. Для цього в HTML існують спеціальні атрибути, один із них — width.

Атрибут width

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

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

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

АтрибутПризначення
srcШлях до файлу зображення
widthШирина зображення
heightВисота зображення
<!-- Зображення шириною 300px -->

<img 
  src="smile.png" 
  width="300"
>

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

❗ Важливо:

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

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

У HTML ширина задається так: width="300". Не потрібно писати width="300px".

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

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