Разделы

Как сделать изображение на всю ширину окна браузера?

Масштабирование изображений относительно их исходного размера не очень хорошая идея, хотя бы потому, что качество картинки очень сильно ухудшается. Тем не менее, для некоторых видов изображений, к примеру, содержащих геометрические фигуры или абстракцию, масштабирование вполне эффективно можно применять.

Для изменения ширины достаточно задать значение параметра width тега <IMG> как 100%. При этом высота изображения будет вычисляться автоматически исходя из сохранения пропорций, поэтому параметр height указывать не нужно (пример 1).

Пример 1. Ширина изображения

<!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>Ширина 100%</title>
 </head>
 <body>
  <p><img src="figure.jpg" alt="Винни-Пух" width="100%"></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Изображение с шириной 100%

Если для тега <IMG> все-таки установить параметр height, то его высота будет задана принудительно, соответственно, исказятся пропорции.

Гость, 29.10.2008

есть тема - когда прописываешь оба параметра в процентах относительно окна браузера, один, бывает, игнорируется...? о_О

Vlad, 02.11.2008

Не один размер, а конкретно высота в процентах игнорируется.

Разделы

Термины

Как сделать изображение на всю ширину окна браузера?

Отправить комментарий