Атрибут width
Браузер |
Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Версия |
6.0 |
7.0 |
8.0 |
9.0 |
2.0 |
3.0 |
4.0 |
5.0 |
9.2 |
9.6 |
10 |
2.0 |
3.1 |
4.0 |
5.0 |
2.0 |
3.0 |
3.6 |
4.0 |
Поддержка |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HTML: |
3.2 |
4.01 |
5.0 |
XHTML: |
1.0 |
1.1 |
|
Для изменения размеров изображения средствами HTML предусмотрены параметры height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного параметра width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.
Синтаксис
HTML |
<img width="значение"> |
XHTML |
<img width="значение" /> |
Значения
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
Исходная ширина изображения.
Пример. Размеры изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег IMG, параметр width</title>
</head>
<body>
<p><img src="/images/sample.gif" width="350" height="250" alt=""></p>
</body>
</html>