Адаптивные изображения в CSS
Media queries перестраивали layout при смене viewport. Изображения — отдельный стресс: файл 4000px в узкой колонке вылезает, жрёт трафик или дёргает страницу при загрузке. Урок про fluid CSS, резерв места и умный выбор файла — без повтора синтаксиса @media из прошлой сессии.
Набор инструментов
📊 Адаптивные изображения кратко
| Элемент | Задача |
|---|---|
max-width: 100% + height: auto |
Масштаб в колонке; пропорции сохраняются |
width/height на <img> или aspect-ratio |
Резерв места; меньше CLS |
srcset + sizes |
Браузер выбирает ширину файла под слот |
<picture> + <source media> |
Art direction — другой кроп или asset |
object-fit + фиксированная рамка |
Обрезка в известной box (урок Object Fit) |
| Media queries layout | Колонки и nav — картинка следует ширине слота |
Два слоя: ширина layout и поведение изображения. Сначала overflow в CSS; потом srcset, если на телефоне нужны меньшие файлы.
Fluid — max-width и height: auto
.article img {
max-width: 100%;
height: auto;
display: block;
}
Не ставьте только width: 100% на огромные intrinsic без max-width. Сочетайте с srcset.
Резерв — aspect-ratio
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
Для контентных фото целиком — fluid max-width. aspect-ratio + cover при фиксированной рамке дизайна.
Разрешение — srcset, sizes
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>
sizes честно по реальному CSS.
Art direction — <picture>
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>
picture для art direction, не для пятидесяти дубликатов breakpoint.
Фиксированные рамки — object-fit
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
Queries меняют колонки; картинки наследуют ширину слота. Обновляйте sizes.
Попробуйте
- Широкий img —
max-width: 100%,height: auto. aspect-ratioна hero.- srcset + sizes.
- picture два кропа.
- thumb с cover.
Ошибки
- Огромный src без srcset
- width 100% без height auto
- неверный sizes
- object-fit без box
- снова учить @media здесь
Итог
- Fluid CSS держит в колонках
- aspect-ratio уменьшает скачок
- srcset/sizes — файл; picture — art direction
- object-fit для фиксированных рамок
- Далее: Breakpoints
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху