Изображения в документе
В настоящее время скорость Интернета возросла настолько, что загрузка изображений с серверов уже не является проблемой. Изображения на странице сделают сайт привлекательным и удобным для пользователя. Используя изображения для оформления сайта необходимо знать меру, иначе сайт станет неповоротливым (будут долго загружаться страницы) и в результате не понравится пользователям. Для встраивания изображений в документ используется тег <IMG>.
Формат представления:
<IMG SRC="Источник">
Атрибуты:
src – Путь к файлу изображения.
align – Выравнивание изображения (размещение).
width – Ширина изображения.
height – Высота изображения.
hspace – Отступ от текста по горизонтали.
vspace – Отступ от текста по вертикали.
border – Размер рамки вокруг изображения. Задается в пикселях.
alt – Текст выводимый на экран в случае если изображение не загружается (если в браузере стоит режим не отображать картинки или сервер на котором хранятся изображения недоступен).
Выравнивание изображения производится относительно текста по горизонтали либо вертикали. Первые два значения определяют место расположения изображения по горизонтали, остальные вертикальное. При горизонтальном выравнивании текст обтекает изображение. При вертикальном выравнивание может быть привязка к базовой линия строки. Это линия на которой располагаются буквы. Некоторые буквы могут выступать за базовую линию, к примеру буквы "р" и "у" выступают ниже базовой линии, а все буквы верхнего регистра выступают выше базовой линии. При вертикальном выравнивании только первая строка выравнивается относительно изображения остальная часть текста располагается ниже изображения.
Значения атрибута align:
left – Изображение находится слева от текста.
right – Изображение находится справа от текста.
top – Верхний край изображения выровнен по верхнему краю самого высокого элемента строки.
Texttop – Верхний край изображения выровнен по самому высокому элементу текста.
middle – Середина изображения выровнена по базовой лини строки.
absmiddle – Середина изображения выровнена по середине строки.
baseline или bottom – Нижняя граница изображения выровнена по базовой линии.
absbottom – Нижняя граница изображения выровнена по нижней границе строки.
Выравнивание изображения относительно текста
 Изображение выровнено по левому краю. Текст находится справа. |
| Изображение выровнено по левому краю. Текст находится слева. |
| Выравнивание по верхнему краю. |
| Выравнивание по самому высокому элементу текста. |
| Выравнивание по середине базовой строки. |
| Выравнивание по середине строки. |
| Выравнивание по нижнему краю с помощью baseline. |
| Выравнивание по нижнему краю с помощью bottom. |
| Нижняя граница изображения выровнена по нижней границе строки. |
Ширину и высоту изображения можно задать в пикселях или в процентах. При использовании процентов необходимо учесть что размер вычисляется в процентах объекта в котором находится изображение, а не от размеров самого изображения. В примере это размер ячейки, если изменить размер элемента в котором находится изображение то изменится и размер изображения. Задаваемые размеры определяют не физический размер изображения, а видимый на экране. Браузер просто подгонит изображение под выделенную область. Если задать только один размер то второй будет вычислен браузером, с учетом сохранения пропорций.
Если необходимо деформировать изображение то есть задать ширину и высоту то необходимо задавать размер в пикселях, а не в процентах.
Задание ширины изображения
| Тег | Описание |
|---|
| Ширина и высота не указаны – изображение выводится в натуральную величину 64x64. |
| Размер изображения задается в процентах (Задана только ширина 80%. Размер изображения привязан к ширине ячейки, в котором оно выводится). |
| Ширина задана 130, а высота 90 |
| Задана высота 85 пикселей. |
Рамка вокруг изображения и отступы до текста улучшает вид и восприятие информации.
Рамка вокруг изображения и отступ от текста
| Рамка 12. Отступов нет. |
| Рамка 8. Горизонтальный отступ 10. |
| Задан только вертикальный отступ 10. |
| Заданы рамка 6 и отступы по вертикали и горизонтали 10. |
| 
