Коротко: картинки в CSS настраивают свойствами width и height, для сохранения пропорций — max-width: 100%. Содержимое внутри рамки регулирует object-fit (cover, contain), а фон — background-size.
Основные свойства
| Свойство | Что делает |
|---|---|
width |
ширина изображения |
max-width: 100% |
не вылезает за контейнер |
object-fit |
как вписать в рамку |
aspect-ratio |
соотношение сторон |
border-radius |
скругление |
Адаптивные изображения
img {
max-width: 100%;
height: auto;
display: block;
}Эти три строки — базовое правило для картинок. Изображение не превысит ширину контейнера, сохранит пропорции и не оставит лишний отступ снизу.
Вкладки: вписывание в рамку
.card img {
width: 100%;
height: 220px;
object-fit: cover;
}cover заполняет рамку и обрезает лишнее — карточки одинаковой высоты выглядят аккуратно.
.logo { object-fit: contain; }contain вписывает изображение целиком, оставляя поля. Подходит для логотипов и картинок, которые нельзя обрезать.
.thumb {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}aspect-ratio задаёт пропорции независимо от исходного размера файла — удобно для превью и видеообложек.
Практика: настроить картинки
- Добавьте базовые правила для всех
img. - Для карточек задайте рамку и
object-fit. - Для логотипов используйте
contain. - Задайте
aspect-ratioдля превью. - Скруглите углы при необходимости.
- Проверьте вывод на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка растянута | заданы обе стороны | object-fit или height: auto |
| Вылезает за экран | нет max-width |
max-width: 100% |
| Лишний отступ снизу | строчное поведение | display: block |
| Страница «прыгает» | нет размеров | задать aspect-ratio |
| Логотип обрезан | cover |
contain |
Проверьте себя
object-fit: cover?
Вопросы и ответы
Потому что заданы и ширина, и высота без object-fit. Браузер вписывает картинку в заданную рамку и искажает пропорции. Решение — height: auto или object-fit.
cover заполняет рамку и обрезает лишнее, contain вписывает целиком с полями. Для карточек берут cover, для логотипов — contain.
Изображение по умолчанию строчное, поэтому под ним остаётся небольшой отступ от базовой линии текста. Блочный режим убирает этот зазор.
Свойство задаёт пропорции элемента. Оно помогает резервировать место под картинку и избегать «прыжков» страницы при загрузке.
Итоги
- Базовое правило:
max-width: 100%иheight: auto. object-fitуправляет вписыванием в рамку.- Пропорции резервируют через
aspect-ratio. - Для фона используют
background-size.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.