Как сделать обтекание картинки текстом в HTML и CSS - 4.4 out of 5 based on 16 votes

Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.

Обтекание картинки текстом при помощи HTML

Наиболее простой, способ позиционирования картинки на странице это воспользоваться средствами HTML. Но у данного способа, по сравнению с возможностями CSS есть недостаток, в нем нет возможности установить отступ между картинкой и текстом, а лишь можно сделать так, чтобы текст обтекал изображение.

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: . Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

Где foto.jpg - это относительный путь к картинке..jpg

У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align="left" по левому краю). Атрибут align имеет следующие значения:

• left - изображение будет расположено по левому краю, а текст будет обтекать его справа;
• right - изображение расположится справа, а текст будет обтекать его слева;
• bottom - отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
• top - тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
• middle - при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

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

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

Обтекание картинки текстом при помощи свойств CSS

На самом деле, те примеры создающей обтекание текста и позиционирование картинки, которые мы рассмотрели выше являются немного устаревшими, сейчас принято все элементы отвечающие за внешний вид страницы делать при помощи свойств и значений CSS.

Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.

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

Теперь классу leftfoto нужно присвоить определенные CSS стили.

Leftfoto{ float:left; margin: 4px 10px 2px 0px; }

Данный код располагают между тегами ..., заключив в теги или помещают во внешний файл стилей CSS.

Разберем те элементы, которые мы здесь задали:

• float:left; - мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align="left".
• margin: 4px 10px 2px 0px; - мы задали внешние отступы, 4px - от верха, 10px - справа, 2px снизу и 0px слева от изображения.

Наличие изображений на веб-страницах улучшает их внешний вид, привлекает внимание, а также способствует лучшему восприятию текстов. Обтекание картинки текстом html позволяет связать контент с иллюстрациями и рационально разместить материал. Постоянно разрабатываются новые способы создания изображений, позволяющие воплощать творческие идеи. При этом новые стили макетов основаны на одних и тех же способах, создающих безграничный простор фантазии.

Позиционирование картинок относительно текста может производиться в html или с помощью свойств CSS.

Теги html: обтекание картинки текстом

Картинки располагают на странице тремя способами:

• центральное положение;
• обтекание текстом;
• вставка в поле.

При большом размере картинку располагают посередине страницы, сначала поместив в контейнер < p > тега img, после чего для него устанавливают атрибут align="center". Если часто используют изображение, следует применять стиль CSS к тегу < p >.

Когда изображение небольшое, рядом располагают текст. Способ является наиболее распространенным. Обтекание текстом делают несколькими способами. Но сначала картинку нужно вывести на экран. Если к ней известен путь, например, "foto1.jpg", ее вставляют на html страницу с помощью следующей записи:

< p>< img src =" foto1.jpg ">< /p>

Пример соответствует случаю, когда файлы html и рисунка находятся в одной папке.

Если за изображением следует текст, он будет располагаться ниже. Это не всегда удобно, поскольку по бокам будут оставаться пустые места, Поэтому страницу оформляют так, чтобы создать обтекание картинки текстом html. Для этого у тега img существует атрибут align, задающий расположение фото или рисунка относительно текста. От этого параметра зависит, с какого края страницы располагается графический материал и каким образом его обтекает текст.

Атрибуту можно задавать следующие значения:

• left - перемещение картинки влево при обтекании текстом справа;
• right - обтекание изображения слева при его размещении справа;
• bottom - значение по умолчанию, когда картинка располагается слева, первая строка текста начинается на уровне нижней ее части;
• top - изображение размещается аналогично предыдущему значению, но первая строка расположена по его верхнему уровню;
• middle - начальная строчка текста проходит напротив середины изображения.

У тега img есть параметры, которыми можно задавать расстояние от текста до картинки (hspace и vspace). Без их применения текст будет располагаться к картинке вплотную. Кроме того, выбираются габаритные размеры рисунка width и height. При этом должна соблюдаться пропорция между шириной и высотой. Если габариты не задавать, по умолчанию рисунок переносится с размерами исходника, что не всегда удобно.

Перемещение изображения к левому краю с его обтеканием текстом можно сделать с помощью записи:

< p>< img src =" foto1.jpg " align="left" width=150 height=100 hspace=5 vspace=5>Текст< /p>

Применение таблиц

Обтекание картинки текстом html легко делать с помощью таблицы, внутри ячейки которой помещается изображение. Здесь свойство align применяется для тега table. Таблицы имеют больше управляемых параметров, что создает для них преимущества:

< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= "foto2.jpg" width=150 height=100>

< /table >

Граница таблицы делается невидимой и не позволяет тексту приблизиться к изображению. Отступы между ячейками и внутри них могут регулироваться.

Использование стилей

Из предыдущих примеров видно, как просто сделать обтекание картинки текстом html. CSS позволяет достигнуть аналогичных результатов. Обтекание создают с помощью свойства float. Здесь также выравнивание обеспечивается значениями left и right.

Для этого создается класс и ему присваиваются стили CSS:

margin: 5px 12px 3px 0px;

Затем стилевое свойство float добавляется к селектору img:

< img src= "foto1.jpg" class="fotoleft" >

Кроме выравнивания изображения с помощью значения left, здесь также устанавливаются отступы текста от картинки свойством margin. Аналогично делается обтекание текста слева, если применить свойство right.

Стили позволяют накладывать текст непосредственно на изображение. Для этого текст вставляется в блок с полупрозрачным фоном, который накладывается на картинку.

Делать эффектное обтекание текстом и его накладывание на изображения не так уж трудно, поскольку этого добиваются последовательными экспериментами.

Обтекание изображений округлой формы текстом html

Веб-страницы состоят преимущественно из прямоугольных областей. Всем известно, как сделать обтекание картинки текстом в html. Стили применяют для создания геометрических фигур, но они не связаны с укладкой контента внутри или снаружи элементов. Можно рисунок разделить на 2 части и разместить с обеих сторон блоки отступов разной ширины. За ними сразу располагается текст.

Процесс создания подобного обтекания является трудоемким, и его надо делать отдельно для каждого нового рисунка.

Обтекание текстом сложных фигур

Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.

Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.

Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:

shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */

< p>Пример текста< /p>

Код создает круг, идеально обтекаемый текстом.

Аналогично будет создаваться любая неправильная форма, благодаря поддержке Photoshop, который позволит получить CSS код фигуры.

Заключение

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

Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - float:left; , текст списка обтекает её справа, как на скриншотах. При обтекании картинки, (нумерация, маркировка) списка наползают на изображение и получается трабл (trouble , англ. - «ошибка», «проблема»). Щёлкайте картинки для полного просмотра:

Напрашивается простой способ подправить ситуацию - увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»

В случае простого увеличения отступа (margin) у рисунка, вместе со списком - «уезжает» вправо и обычный текст

Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. Корень проблемы кроется в редко используемом свойстве элемента списка . Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside - маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside - маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).

Значение list-style-position по умолчанию, для всех браузеров - outside . Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:

li {
  margin: 0;
  padding-left: 1,9em;
  list-style-position: inside;
  text-indent: -1em;
  overflow: hidden;
  }

Прописать спасительный код для элемента списка (