Атрибут width

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута height или width сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Старайтесь задавать размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остаётся неизменным. При этом качество изображения может ухудшиться.

Синтаксис

<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>

Браузеры

1121111
1141

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 02.01.2017
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты