Атрибут width до HTML тега <img>

9 червня 2022 р.135

Зміст

Для зміни розмірів зображення засобами HTML передбачені атрибути height та width. Дозволяється використовувати значення у пікселях або відсотках. Якщо встановлено відсотковий запис, то розміри зображення обчислюються щодо батьківського елемента — контейнера, де знаходиться елемент <img>. У разі відсутності батьківського контейнера, як його виступає вікно браузера. Іншими словами, width="100%" означає, що малюнок буде розтягнутий на всю ширину веб-сторінки. Додавання лише одного атрибуту height або width зберігає пропорції та відношення сторін зображення. Браузер при цьому очікує повного завантаження малюнка, щоб визначити його початкову висоту та ширину.

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

Ширину та висоту зображення можна змінювати як у меншу, так і більшу сторону. Однак на швидкість завантаження малюнка це не впливає, оскільки розмір файлу залишається незмінним. При цьому якість зображення може погіршитися. field_html_syntax">Синтаксис

<img width="< ;значення>">

Значення

Будь-яке ціле позитивне число в пікселях або відсотках.

Значення за замовчуванням

Вихідна ширина зображення.

Приклад

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>IMG, атрибут width</title>
</head>
<body> <p><img src="image/sample.gif" width="350" height="250" alt=""></p>
</body>
</html>

Браузери


1	12	1	1	1	1


1	1	4	1

Браузери

У таблиці браузерів застосовуються такі позначення.

— елемент повністю підтримується браузером;
— елемент браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або елемент підтримується з застереженнями. li>

Число вказує версію браузреа, з якої елемент підтримується.