Задания
Задание 1 — резиновая картинка
Сделайте картинку, которая не вылезает за контейнер и сохраняет пропорции. Задайте max-width:100%,
height:auto и атрибуты width/height в теге.
Ожидаемый результат: при сужении окна картинка плавно ужимается, контейнер не переполняется.
Задание 2 — srcset + sizes
Для одной фотографии-обложки подготовьте (на словах/в коде) три файла: 480w, 960w,
1440w. Опишите sizes: на экранах от 64rem картинка занимает 50vw, иначе 100vw.
Ожидаемый результат: в DevTools → Network на телефоне грузится 480w/960w,
на широком Retina — 1440w.
Задание 3 — picture: формат + art direction
Оберните обложку в <picture>: <source type="image/webp"> для формата и
<source media="(min-width: 64rem)"> с широким кадром для desktop. В конце — <img>
с портретным кадром, alt и размерами.
Ожидаемый результат: на телефоне — портретный кроп, на desktop — панорама; в браузерах без WebP показывается JPG.