How to correctly set the sizes and srcscreen attributes?

Question

css

Hello! I have a responsive web page based on the bootstrap library.
The container-columns of this library change their width 5 times depending on the media query.
For each container width, I prepared my image so that the image width is no larger than the container width. Like this:
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" My

task is the following, with a window width of more than 1200px - the width of my container is 235px and therefore I need the browser to substitute soft_smoke_lite_235.webp 235w , but it considers it necessary and loads the image soft_smoke_lite_445.webp 445w, which is in width greater than the width of the container,
with a window width of more than 992px I already need to load a 180px image because the container will be 180px wide, with a window width of more than 768px I need to load a 210px image because the container will change its width value to 210px. And so
on.How and on what basis is it possible to do this?