Урок 36. Справочник: Адаптивные изображения: srcset, sizes, picture

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя

#srcset #sizes #picture #source #media #type #img #object-fit #object-position #contain #fill

⚡ Кратко

Атрибуты и теги урока: srcset (список файлов), sizes (CSS-размер), <picture>/<source> (условные источники), object-fit (заполнение блока). Дескрипторы: w — ширина файла, x — плотность экрана.

Атрибуты и теги

Инструмент	Зачем нужен	Мини-пример
`srcset`	Список доступных файлов изображения	`srcset="hero-480.webp 480w, hero-960.webp 960w"`
`sizes`	Ожидаемый CSS-размер изображения по условиям	`sizes="(min-width: 64rem) 50vw, 100vw"`
дескриптор `w`	Реальная ширина файла в пикселях	`hero-960.jpg 960w`
дескриптор `x`	Файл для экрана с данным DPR	`logo@2x.png 2x`
`<picture>`	Контейнер для разных источников	`<picture>…</picture>`
`<source>`	Условный источник (по `media` или `type`)	`<source type="image/webp" srcset="hero.webp">`
`media`	Условие экрана для art direction	`media="(min-width: 64rem)"`
`type`	MIME-формат для выбора WebP/AVIF	`type="image/avif"`
`<img>` (fallback)	Базовый источник + `alt`, если source не подошёл	`<img src="hero.jpg" alt="…" width="960" height="640">`
`object-fit`	Как картинка заполняет блок фикс. размера	`object-fit: cover;`
`object-position`	Какую часть картинки оставить при cover	`object-position: top;`

object-fit — значения

Значение	Поведение
`cover`	Заполняет блок без полей, обрезая лишнее (чаще всего)
`contain`	Вписывает картинку целиком, возможны поля
`fill`	Растягивает под блок, искажая пропорции (по умолчанию)
`none` / `scale-down`	Без масштаба / меньшее из none и contain

Правило выбора: один файл меняет размер по вёрстке → srcset+sizes; нужен другой кадр под экран → <picture media>; нужны WebP/AVIF → <source type>.

Навигация