Как правильно настроить атрибуты sizes и srcscreen?
Здравствуйте! У меня адаптивная веб страница на библиотеке bootstrap.
Контейнеры-колонки этой библиотеки меняют свою ширину 5 раз в зависимости от медиа запроса.
Для каждой ширины контейнера я приготовил свое изображение, чтобы ширина изображения не было больше ширины контейнера. Следующим образом:
sizes="(min-width: 1200px) 235px"
srcset="soft_smoke_lite_180.webp 180w,
soft_smoke_lite_210.webp 210w,
soft_smoke_lite_235.webp 235w,
soft_smoke_lite_240.webp 240w,
soft_smoke_lite_445.webp 445w"
Задача у меня стоит следующая, при ширине окна более 1200px - ширина моего контейнера составляет 235px и поэтому мне нужно чтобы браузер подставил soft_smoke_lite_235.webp 235w , но он считает нужным и загружает изображение soft_smoke_lite_445.webp 445w, которое является по ширине больше чем ширина контейнера.
При ширине окна более 992px мне уже нужно загружать изображение 180 px т.к. контейнер будет составлять 180px ширины, при ширине окна более 768px мне нужно загрузать изображение 210px, т.к. контейнер поменяет значение своей ширины на 210px. И так далее.
Каким образом и по какому принципу это возможно сделать?
