Коротко: картинку в CSS располагают по центру, прижимают влево/вправо или ставят поверх блока. Способ зависит от контекста: картинка в тексте, в отдельном блоке или как фон.
Четыре ситуации
| Ситуация | Инструмент |
|---|---|
| Картинка в тексте | text-align у родителя или margin: 0 auto |
| Картинка-блок | display: block + margin: 0 auto |
| Прижать вбок | flex justify-content или float |
| Поверх блока | position: relative/absolute |
Вкладки: способы с кодом
img {
display: block; /* обязательное условие */
margin: 0 auto; /* центрирование */
max-width: 100%; /* адаптив */
}Если картинка внутри абзаца (inline) — центрируйте через text-align: center у родителя.
.photo-left { float: left; margin: 0 16px 16px 0; }
.photo-right { float: right; margin: 0 0 16px 16px; }Современная альтернатива — flex у контейнера: justify-content: flex-start|flex-end.
.card { position: relative; }
.card img { display: block; width: 100%; }
.card .label { position: absolute; left: 12px; bottom: 12px; color: #fff; }Так делают бейджи и подписи поверх изображения. Для читаемости добавьте затемнение.
Практика: три задачи
1. Картинка по центру текста статьи
- Задайте
img { display:block; margin: 0 auto; max-width: 100%; }. - Добавьте отступы сверху и снизу для «воздуха».
- Проверьте, что картинка не растянулась.
2. Обтекание текстом
img.align-left { float: left; margin: 0 16px 8px 0; }Не забывайте: после обтекаемых картинок поток может «поехать». Надёжнее — flex/grid.
3. Картинка-фон с текстом
.hero {
background: url('cover.jpg') center/cover no-repeat;
min-height: 320px;
display: flex; align-items: flex-end; padding: 24px;
color: #fff;
}width и height одновременно — картинка искажается. Указывайте только одну сторону или добавляйте object-fit.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Не центрируется | display: inline |
display: block |
| Картинка «вылезает» за экран | нет max-width |
max-width:100% |
| Искажена | заданы обе стороны без object-fit |
убрать одну сторону |
| Поток «поехал» после float | не очищено обтекание | flex/grid вместо float |
Проверьте себя
margin: 0 auto не центрирует картинку?
Вопросы и ответы
Родителю position: relative, тексту — position: absolute и смещения; для читаемости — затемнение.
object-fit: cover у картинки и фиксированный размер контейнера.
Смысловые картинки — img (учитываются поиском). Декор — background.
Не задана ширина, и картинка выводится в «натуральном» размере. Добавьте width: 100% внутри контейнера.
Итоги
- Центр —
display:block+margin:0 auto. - Вбок — flex (или
float). - Поверх —
relative+absolute. - Всегда
max-width: 100%и сохраняйте пропорции.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.