Размеры изображения
Размер каждого изображения задается двумя параметрами: ширина и высота. У тега <img> есть соответствующие параметры: width и height. Эти параметры принимают значения в пикселах (px).
Вы можете задать истинные размеры изображения:
<img src="img/1.png" width="176" height="146">
Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега <img>, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.
А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.
Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:
<img src="img/1.png" width="264"> или <img src="img/1.png" width="264" height="219">
Результат будет один:
Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало ровно половину нашей странички, надо написать следующее:
<img src="img/1.png" width="50%">
И мы получим:
Рамка вокруг изображения
У тега <img> есть еще один необязательный параметр border. С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 2 пиксела:
<img src="img/1.png" border="3">
Вот что покажет нам браузер:
Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега <body> (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.
Но если изображение является ссылкой, то у него толщина рамки по умолчанию = 1, а его цвет совпадает с цветом ссылок:
И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:
<img src="img/1.png" border="0">
Альтернативный текст
Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.
Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.
Чтобы добавить альтернативный текст, используется параметр alt тега <img>, которому присваивается строковое значение, обязательно заключенное в кавычки.
<img src="img/1.png" alt="Альтернативный текст">
Можно создать многострочный альтернативный текст.
Наведите курсор на картинку
Для этого достаточно вставить перенос строки в html-документе.
<img src="img/1.png" alt="Альтернативный текст">
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие выравнивания относительно текста и других изображений на странице. Задать тип выравнивания можно также с помощью параметра align тега <img>.
Ниже приведена таблица возможных значений параметра align:
Значение
Описание
Результат
<img src="sample.gif"
Верхняя граница
Хотя Карлсон и был
align="texttop">
изображения выравнивается по самому
высокому текстовому элементу текущей
строки.
лучшим
в мире специалистом по паровым машинам,
денатурат он наливал весьма неуклюже
и даже пролил его, так что на полке
образовалось целое денатуратное озеро.
<img src="sample.gif" align="top">
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
Хотя
Карлсон
и
был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро.
<img src="sample.gif" align="middle">
Выравнивание середины изображения по базовой линии текущей строки.
Хотя
Карлсон
и
был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро.
<img src="sample.gif" align="absmiddle">
Выравнивание середины изображения по средине текущей строки.
Хотя
Карлсон
и
был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро.
<img src="sample.gif" align="baseline">
Выравнивание изображения по базовой линии текущей строки.
Хотя
Карлсон
и
был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось целое
денатуратное озеро.
<img src="sample.gif" align="bottom">
Выравнивание нижней границы изображения по окружающему тексту.
Хотя
Карлсон
и
был лучшим в мире специалистом по
паровым машинам, денатурат он наливал
весьма неуклюже и даже пролил его, так
что на полке образовалось
целое денатуратное озеро.
<img src="sample.gif"
Выравнивает
Хотя Карлсон и был
align="left">
изображение по
лучшим в мире
левому краю окна.
специалистом по паровым
машинам, денатурат он
наливал весьма неуклюже и
даже пролил его, так что на
полке образовалось целое
денатуратное озеро.
<img src="sample.gif"
Выравнивает
Хотя Карлсон и был
align="right">
изображение по
лучшим в мире
правому краю окна.
специалистом по паровым
машинам, денатурат он
наливал весьма неуклюже и
даже пролил его, так что на
полке образовалось целое
денатуратное озеро.
Параметры texttop, top, middle, absmiddle, baseline, bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.