Изображения в тексте | htmlbook.ru
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.
Рисунок по центру
Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 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=utf-8">
<title>Рисунок по центру</title>
<style type="text/css">
P.
fig {
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<p>
<img src="images/sample.gif" alt="Иллюстрация">
</p>
</body>
</html>
В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание рисунка текстом
Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа
Так, у тега <img> есть атрибут align,
который определяет выравнивание изображения.
Этот атрибут задает, возле какого
края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания
текста. Чтобы выровнять изображение по правому краю и задать обтекание слева,
используют значение right, для выравнивания по
левому краю применяют left. Атрибут align
часто используют в связке с другими атрибутами тега <img> —
vspace и hspace. Они
определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов
изображение и текст будут слишком плотно прилегать друг к другу (пример 2).
Пример 2. Использование свойств тега <img>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Рисунок в тексте</title>
</head>
<body>
<p><img src="images/sample.gif"
alt="Иллюстрация" align="left"
vspace="5" hspace="5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Горизонтальный отступ от картинки до текста управляется атрибутом hspace, он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace.
Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.
Пример 3. Использование стилей
<!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=utf-8"> <title>Рисунок в тексте</title> <style type="text/css"> IMG.
fig {
float: right; /* Обтекание картинки по левому краю */
padding-left: 10px; /* Отступ слева */
padding-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<p><img src="images/sample.gif"
alt="Иллюстрация">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
</body>
</html>В данном примере к тегу <img> добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.
Рисунок на поле
При такой схеме изображение располагается справа или слева от текста, причем
его обтекание происходит только с одной стороны.
Фактически это напоминает две
колонки, в одной из них находится рисунок, а в другой текст (рис. 3).
Рис. 3. Изображение размещается на поле слева от текста
Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.
Пример 4. Создание рисунка на поле с помощью таблиц
<!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=utf-8">
<title>Рисунок на поле</title>
<style type="text/css">
TD. leftcol {
width: 110px; /* Ширина левой колонки с рисунком */
vertical-align: top; /* Выравнивание по верхнему краю */
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/igels.png"
alt="Вы не поверите, но это
ёжик"></td>
<td valign="top">Ёжики защищены от внешней агрессии колючим
панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом
ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это
хищник. Да, он не питается волками и лисами, но только потому, что уступает
им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td>
</tr>
</table>
</body>
</html>
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от текстаВ данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где
он располагается — 110 пикселов.
Разница между ними и обеспечивает нужное
расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing
и cellpadding не вмешивались в процесс, их значения
лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
Использование стилей
В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).
Пример 5. Использование margin
<!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=utf-8">
<title>Рисунок на поле</title>
<style type="text/css">
#pic {
float: left; /* Обтекание картинки текстом */
}
#text {
margin-left: 110px; /* Отступ от левого края */
}
</style>
</head>
<body>
<div>
<img src="images/igels. png"
alt="Вы не поверите, но это ёжик">
</div>
<div>
Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех,
кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное
и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами,
но только потому, что уступает им в размерах. А вот закусить червячком или даже
змеей ему вполне под силу.
</div>
</body>
</html> 
Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.
Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.
Три способа выравнивания html картинки по центру
В этой статье мы разберем три простых техники, с помощью которых мы можем выровнять html картинки по центру экрана. Для урока я создал простую html страничку с базовой разметкой и пустой css файл.
Нам понадобится div обертка и изображение, которое мы возьмем на сайте placehold.it. Первое, что мы сделаем это создадим div с классом
<div> <img src="http://placehold.it/350x150" > </div>
Дальше пропишем базовые стили для класса image-wrap. Это будет высота и ширина, немного больше чем картинка. И сплошную рамку размером 1px.
.image-wrap {
width: 500px;
height: 300px;
border: 1px solid gray;
}
Результат ниже на скриншоте.
Способ 1. Добавляем картинке класс .image-center.
Способ заключается в том чтобы картинке добавить свойство display со значением block и так же правило margin:auto.
Возможно вам уже знакома эта техника и вы ее использовали для центрирования div. Но так как изображение является строчным элементом нам необходимо добавить display:block.
<div> <img src="http://placehold.it/350x150"> </div>
.image-center {
display:block;
margin: auto;
}
На скриншоте вы можете увидеть, что изображение отцентрировано.
Способ 2. Копируем html код который есть на данный момент, и диву image-wrap добавим еще класс image-align. А класс .image-center удалим.
Эта техника заключается в том, чтобы содержимое дива отцентрировать с помощью text-align : center. Стоить помнить, если мы добавим текст в див он тоже будет центрироваться вместе с картинкой.
<div> <img src="http://placehold.it/350x150"> </div>
.image-align {
text-align: center;
}
Смотрим результат.
Способ 3. Техника основывается на свойстве display : flex.
Берем код html который использовали в способе 2 и меняем в нем класс image-align на image-flex.
<div > <img src="http://placehold.it/350x150" > </div>
Классу image-flex в css пишем:
.image-flex {
display:flex;
align-items: center;
justify-content: center;
}
Свойство align-items центрирует изображение по вертикали, justify-content по горизонтали. В этом есть главное отличие и плюс от предыдущих способов, мы можем выравнивать картинку по двум осям.
Теперь у вас точно не возникнут вопросы как отцентрировать изображение по центру div. Если у вас есть, что спросить или дополнить, комментарии приветствуются. До встречи в следующих статьях.
CSS. Выравнивание картинки по центру
Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода.
Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство text-align:center. И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока:
<p>Текст параграфа.</p>
<div>
<img src="фото.gif" border="0" alt="" />
</div>
<p>Далее по тексту параграфа.</p>Для этого дополнительного блока присваивается соответствующие CSS-свойство:
.imgCenter {text-align:center;}Всё это было необходимо потому, что Internet Explorer пятых версий не поддерживает уже тогда существовавшее и поддерживаемое другими браузерами свойство внешних отступов auto, которое автоматически налету присваивает одинаковое расстояние слева и справа от выравниваемого элемента. Вышеприведённый способ всё ещё используется.
Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее:
<p>Текст параграфа. <img src="Фото.gif" border="0" alt="" /> Далее по тексту параграфа.</p>
<img src="Фото.gif" border="0" alt="" /> Далее по тексту параграфа.</p>Отсутствие ненужных дополнительных блоков достигается благодаря соответствующему CSS:
.center {display:block; margin:0 auto;}Свойство display:block присваивает картинке характеристику блочного элемента, что избавляет от необходимости использовать <div> или <p> вокруг картинки. Далее декларация margin:0 auto присваивает верхнему и нижнему отступам нулевое значение, а левому и правому отступам — автоматически равнозначное значение, которое выравнивает картинку по центру.
Нужно присвоить разные отступы сверху и снизу? Без проблем. Не забываем про сокращения:
.imgCenter {display:block; margin:15px auto 25px;}К сожалению, в отличие от случаев выравнивания картинок по левому и правому краям (float:left и float:right), нет возможности стандартными методами завёртывать текст вокруг отцентрованной картинки.
Конечно, если это очень важно, то выполнимо.
Также, если картинка одновременно является ссылкой, то область ссылки распространяется на всю ширину блока, вне зависимости от ширины картинки. В некоторых случаях это недостаток.
Вышеописанный метод выравнивания больше всего подойдёт для сайтов, которые используют картинки внутри текста (новости, статьи). Для фотогалерей, конечно же, существуют свои, более изощрённые способы выравнивания картинок.
HTML-тег img
Пример
Как вставить изображение:
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег используется для встраивания изображения в страницу HTML.
Изображения технически не вставляются на веб-страницу; картинки
связаны с веб-страницами. Тег создает пространство хранения для указанного изображения.
Тег имеет два обязательных атрибута:
- src — Задает путь к образу
- alt — Задает альтернативный текст для изображения, если изображение для некоторых причина не может быть отображена
Примечание: Также всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, страница может мерцать, пока изображение нагрузки.
Совет: Чтобы связать изображение с другим документом, просто вложите тег внутрь
тег (см. пример ниже).
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| | Есть | Есть | Есть | Есть | Есть |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| альтернативный | текст | Задает альтернативный текст для изображения |
| перекрестное происхождение | аноним использовать учетные данные | Разрешить изображения со сторонних сайтов, которые позволяют использовать доступ из разных источников с холстом |
| высота | пикселей | Задает высоту изображения |
| ismap | ismap | Задает изображение как карту изображений на стороне сервера. |
| загрузка | нетерпеливый ленивый | Указывает, должен ли браузер загружать изображение немедленно или откладывать загрузка изображений до выполнения некоторых условий |
| longdesc | URL | Задает URL-адрес подробного описания изображения. |
| ссылка на политику | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Указывает, какой реферер использовать при выборке изображения |
| размеры | размеры | Задает размеры изображений для разных макетов страниц |
| src | URL | Задает путь к изображению |
| srcset | URL-список | Задает список файлов изображений для использования в различных ситуациях. |
| использовать карту | #mapname | Задает изображение как карту изображений на стороне клиента. |
| ширина | пикселей | Задает ширину изображения |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Выровнять изображение (с помощью CSS):
Пример
Добавить границу изображения (с помощью CSS):
