Обтекание текстом изображения в HTML/CSS: подробный гайд

Быстрый ответ

Для того чтобы текст гармонично обтекал изображение, используется свойство float в CSS. Устанавливая для изображения значение float: left; или float: right;, вы можете настроить отступы с помощью margin.

<!-- Пример: создание обтекания текстом изображения -->
<img src="image.jpg" alt="" style="float: left; margin: 0 10px 10px 0;">
<p>Здесь начинается ваш текст...</p>

Отслеживайте, как свойства float и margin влияют на позиционирование элементов и формирование отступов.

Размещение изображений

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

Изображение слева

<!-- Выравнивание изображения по левому краю -->
<img src="image.jpg" alt="" style="float: left; margin-right: 10px;">
<!-- Место для текста -->

Изображение справа

<!-- Выравнивание изображения по правому краю -->
<img src="image.jpg" alt="" style="float: right; margin-left: 10px;">
<!-- Место для текста -->

Изображение по центру – Текстовые партнеры

<div style="text-align: center;">
  <img src="image.jpg" alt="">
</div>
<!-- Место для текста -->

При создании центрированных композиций рекомендуется использовать CSS Grid или Flexbox для дополнительной настройки обтекания текстом.

Обтекание текстом изображений нестандартной формы

Для создания обтекания текстом вокруг изображений с необычными контурами используйте свойство shape-outside. Вот пример для круглых изображений:

/* Дизайн круглого изображения */
.circle-image {
  border-radius: 50%;
  float: left;
  shape-outside: circle(50%);
  margin-right: 10px;
}

HTML-разметка:

<img src="circle-image.jpg" alt="" class="circle-image">
<!-- Здесь начинается ваш текст -->
<p>И текст обтекает изображение...</p>

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

Адаптивный дизайн для размеров изображений и обтекания текстом

Для корректного отображения на разнообразных устройствах сделайте изображения адаптивными с помощью свойств width и margin, а для маленьких экранов применяйте медиа-запросы:

/* Правила для малых экранов */
@media (max-width: 600px) {
  img {
    float: none;
    margin: 0 auto;
    display: block;
  }
}

Чистая компоновка и контроль над переполнением

Чтобы предотвратить наложение текста на изображение, используйте overflow: hidden, что позволяет контролировать распределение абзацев:

/* Компоновка текста около изображения без ошибок с 1996 года */
.text-wrap {
  overflow: hidden;
}

.text-wrap::after {
  content: "";
  display: table;
  clear: both;
}

Правильное использование отступов и пробелов поможет сохранить читабельность текста.

Продвинутая компоновка с помощью CSS Shapes

Если возникают сложности с взаимодействием текста и изображений, помощь может прийти от CSS Shapes:

/* Нестандартные формы для уникальной компоновки */
.shape-image {
  float: left;
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Для детальной настройки таких компоновок удобно использовать онлайн-песочницы, например, jsfiddle.

Визуализация

Попробуйте представить себе, как текст обтекает изображение, как вода обтекает камень 🌊➡️🪨:

Текст 🌊: "Lorem ipsum dolor sit amet, consectetur..."

Добавим в наш поток текста значения камень 🪨:

<!-- Здесь начинается борьба за внимание читателя -->
<img src="rock.png" style="float: left;" alt="Rock">

Текст адаптируется: "Lorem ipsum dolor sit amet, consectetur..."
                                  "adipiscing elit. Sed do eiusmod..."

Текст "окутывает" изображение, формируя естественное сочетание:

До:     | Lorem ipsum dolor sit amet, consectetur adipiscing elit...
После:  | 🪨 Lorem ipsum dolor sit amet, consectetur adipiscing...
         | elit. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Профессиональные советы

1. Цвет фона: Используйте background-color для выделения изображения на текстовом фоне.
2. Псевдоэлементы: Прозрачные элементы помогут сохранить структуру и распределение контента.
3. Отступы и промежутки: Важны для визуального разделения текста и изображения.
4. Сочетание float: Практика использования float: left; и float: right; открывает интересные возможности для расположения текста.
5. Современные инструменты: Для большего контроля используйте CSS Grid и Flexbox.

Полезные материалы

1. float – CSS — float служит для контроля расположения элементов на странице.
2. Flexbox | CSS-Tricks — Flexbox предоставляет гибкость в размещении элементов.
3. float and clear — Иллюстрация взаимодействия между float и clear.
4. Guide to CSS Grid — CSS Grid — это инструмент для планирования пространства в веб-разработке.
5. shape-outside – CSS — shape-outside позволяет формировать текст вокруг изображения.
6. Block formatting context – CSS — Ознакомьтесь с контекстами форматирования блоков, чтобы лучше понимать границы в CSS.