Свойства width и height

Ширина и высота элемента, в том числе и изображения, определяются соответственно свойствами width и height. Значения этих свойств задаются либо в абсолютных или относительных единицах, либо в виде процента относительно ширины или высоты блока, в котором содержится элемент. Кроме того, в качестве значения свойства может быть задано значение auto – ширина и/или высота элемента определяется автоматически (это значение является значением по умолчанию). Для значений свойств действуют следующие правила:

· если оба значения свойств width и height равны auto или оба эти свойства не заданы, то изображение будет иметь «естественный» размер, т.е. тот размер, который задан в файле;

· если одно из значений свойств width и height равно auto или одно из свойств не задано, а другое задано в абсолютных или относительных единицах, то изображение будет иметь заданную в абсолютных или относительных единицах ширину или высоту, а второе значение будет увеличиваться или уменьшаться пропорционально, т.е. с сохранением отношения ширины и высоты;

· если оба значения свойств width и height заданы в абсолютных или относительных единицах, то размер изображения будет определяться значениями свойств (при этом отношения ширины и высоты может быть нарушено).

Пример 4.3.64. Использование свойств width и height:

Для последовательности элементов HTML:

<h4>1. Масштаб 1:1 (68×81)</h4>

<img src="baloon.png" style="background-color:greenyellow;

width:auto; height:auto"/>

<h4>2.Увеличение ширины в 2 раза с сохранением

пропорций</h4>

<img src="baloon.png" style="background-color:greenyellow;

width:136px; height:auto"/>

<h4>3. Масштаб 0,5:1,5</h4>

<img src="baloon.png" style="background-color:greenyellow;

width:34px; height:120px"/>