<img src="hero-960.jpg" srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1440.jpg 1440w" sizes="(max-width: 640px) 100vw, 50vw" alt="Echipă la lucru">На узких экранах изображение занимает viewport, а в широком макете — примерно половину.
УРОК 78 ИЗ 100
Опишите ширины изображений-кандидатов
Предложите три реальные ширины и сообщите браузеру, сколько места займёт изображение.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
Дескрипторы w указывают внутреннюю ширину каждого кандидата. При их использовании sizes описывает размер отображения, позволяя браузеру выбрать ресурс до загрузки.
<img srcset="hero-480.jpg 480w, hero-960.jpg 960w" alt="Echipă">При дескрипторах w отсутствие sizes заставляет браузер предполагать 100vw, что может привести к выбору слишком большого ресурса.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Добавьте три кандидата 480w, 960w и 1440w и sizes с условием до 640px и конечным значением 50vw.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○srcset содержит корректные уникальные ширины 480w, 960w и 1440w.
- ○sizes содержит media-условие и корректный конечный размер.
- ○Изображение имеет альтернативный текст.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Уникальные дескрипторы описывают файлы, а список sizes — ожидаемое место в двух ситуациях макета.