Задана ширина в процентах

Ширина и высота заданы непропорционально (изображение искажается)

IMG_0628.jpg

В листинге 4.2 для первого изображения задана только ширина, высота вычисляется автоматически. Для второго изображения размер определен в процентах, а для третьего установлены неверные размеры, которые искажают картинку.

Результат работы листинга 4.2 показан на рис. 4.2.

На рис. 4.2 видно, что размеры все-таки имеют значение, особенно для картинок, поэтому следить за их изменением нужно очень внимательно. Если нет необходимости в изменении размеров, то задавайте размеры картинки, соответствующие реальности. Это позволит избежать искажений и ускорит обработку картинки браузером.

Помимо размеров картинки, на внешний вид сайта влияет расположение изображений.

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

Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.

У атрибута align много значений, которые позволяют установить картинку именно так, как надо, и именно там, где надо.

Горизонтальное выравнивание:

• left – по левому краю;

• right – по правому краю.

Вертикальное выравнивание:

• top – выравнивание верхней границы картинки по самому высокому элементу строки;

• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

• middle – середина изображения выравнивается по базовой линии строки;

• absmiddle – середина изображения выравнивается по середине строки;

• baseline – выравнивание нижней границы изображения по базовой линии строки;

• bottom – аналогично baseline;

• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.

В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.

Выравнивание по самому верхнему элементу в строке

Нижняя граница изображения выравнивается по нижней границе текущей строки

Нижняя граница изображения выравнивается по базовой линии строки