Коротко: масштабировать картинку в CSS можно тремя способами: задать размеры, вписать в блок (object-fit) или «зумить» при наведении (transform). Главное — не искажать пропорции.
Кому и зачемНужно для карточек товаров, галерей, обложек статей. Покажем, как получить ровные превью и не «размыть» картинку.
Три способа
CSS
img { width: 300px; height: auto; } /* высота по пропорции */
img { max-width: 100%; height: auto; } /* адаптив */Указывайте только одну сторону — вторая подстроится.
CSS
.thumb { width: 300px; height: 200px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }cover — заполнить с обрезкой (обложки). contain — вписать целиком (логотипы, схемы).
CSS
.thumb img { transition: transform .3s; }
.thumb:hover img { transform: scale(1.08); }Визуальное увеличение без сдвига соседей.
Практика: три задачи
1. Ровные плитки в галерее
- Контейнеру задайте
aspect-ratio: 1 / 1. - Картинке —
width:100%; height:100%; object-fit: cover. - Проверьте разные ориентации фото.
2. Не «размывать» на ретине
CODE
<img src="photo@2x.jpg" width="300" alt="">Для чёткости используйте изображение в 2× размере (или srcset).
3. Адаптивная обложка статьи
CSS
.cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }Главная ошибкаЗадать
width и height одновременно без object-fit — картинка исказится (сплющится/растянется).Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка размытая | файл меньше выводимого размера | использовать 2× или srcset |
| Искажена | обе стороны без object-fit |
убрать одну сторону |
| Выходит за экран | нет max-width |
max-width:100% |
| Плитки «прыгают» | разные пропорции фото | aspect-ratio + cover |
Проверьте себя
Чек-лист
Что делает
object-fit: cover?
Вопросы и ответы
cover — заполнить блок с обрезкой (обложки). contain — вписать целиком (логотипы, схемы).
Исходник меньше выводимого размера. Используйте версию 2× или srcset.
aspect-ratio одинаковый + object-fit: cover — плитки будут ровными.
transform: scale(1.05–1.1) + transition, контейнер с overflow: hidden.
Итоги
- Размеры — одна сторона +
auto. - Кадрирование —
object-fit: cover. - Эффект —
transform: scale(). - Всегда
max-width:100%и не искажайте пропорции.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.