img srcset + sizes對於響應的圖片填充

Question

我有一個12列布局的網站，我試圖找出正確使用srcset和sizes屬性來匹配我的設計。

我有一個橫跨桌面的3列的sidebox，但在平板電腦和手機尺寸跨越12列（100％寬度）。

我想要的是在桌面版本中使用的圖像，也用於移動（最大寬度爲480px），以及特定的平板大小的圖像用於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，然後將使用默認SRC。但是，如何使用320版本直到480px？

Answer 1

如何：

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

它應該顯示的最小圖像可達480像素，那麼大一個高達780px和小一> 780px。