img srcset + размеры картинки для отзывчивого

Question

У меня есть сайт с раскладкой из 12 столбцов, и я пытаюсь понять, как правильно использовать атрибуты srcset и size для соответствия моему дизайну.

У меня есть боковая панель, которая занимает 3 колонки на рабочем столе, но в планшетах и ​​мобильных размерах она охватывает 12 колос (100% ширины).

Что я хочу для изображения, используемого в настольной версии, которое также должно использоваться в мобильных устройствах (максимальная ширина 480 пикселей), а также конкретное изображение размера планшета, которое будет использоваться во всем диапазоне между 481px и 781px.

Это мой код:

<img 
    src="http://placehold.it/370x150/cecece" 
    srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w" 
    sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw" 
> 

В моем примере, версия 768 не всегда используется до 780px, а затем используется ЦСИ по умолчанию. Но как я могу использовать версию 320 до 480 пикселей?

Answer 1

Как об этом:

<img 
    sizes="(min-width: 781px) 370px, 100vm" 
    srcset="http://placehold.it/768x311/f67f57 768w, 
      http://placehold.it/370x311/cecece 480w" 
> 

Он должен показать наименьшее изображение до 480px, то большой один до 780px и маленький> 780px.