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

Реальных файлов в репозитории нет — в превью используются цветные блоки и встроенные SVG как «фото». Логику srcset/picture читайте по коду и комментариям.

1. Резиновая картинка: max-width:100%

Базовое правило. «Фото» (SVG-плейсхолдер) никогда не вылезет за серый контейнер и сохранит пропорции.

img {
  max-width: 100%;   /* не шире контейнера */
  height: auto;      /* пропорции сохраняются */
  display: block;
}

2. srcset + sizes — выбор по ширине и DPR

Браузер сам берёт нужный файл. Превью показывает «меню» файлов; зелёный — что выбрал бы браузер при вёрстке 50vw на экране с DPR=2.

<img
  src="hero-960.jpg"
  srcset="hero-480.jpg 480w,
          hero-960.jpg 960w,
          hero-1920.jpg 1920w"
  sizes="(min-width: 64rem) 50vw, 100vw"
  alt="Обложка статьи"
  width="960" height="640">

3. picture: WebP/AVIF с откатом на JPG

Браузер берёт первый поддержанный <source>; не понял AVIF/WebP — спускается до <img>. Превью имитирует «выбран WebP».

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Обложка"
       width="960" height="640">
</picture>

4. picture: art direction (другой кроп под экран)

На узком экране — портретный кадр, на широком — панорама. Это разные кадры, а не масштаб одного.

<picture>
  <source media="(min-width: 64rem)"
          srcset="hero-wide.jpg">
  <img src="hero-portrait.jpg"
       alt="Спикер на сцене"
       width="600" height="800">
</picture>

5. object-fit: cover / contain / fill

Три блока одного размера (3:2). «Фото» внутри имеет другие пропорции — смотрите, как object-fit его укладывает. Здесь это показано через background-size (аналог для блока).

.tile img {
  width: 120px;
  height: 80px;       /* блок фикс. размера */
  object-fit: cover;  /* cover | contain | fill */
  object-position: center;
}