使用srcset具有固定高度的響應全寬圖像橫幅

Question

我試圖用srcset屬性實現響應全寬（固定高度）圖像橫幅。 爲了支持舊版瀏覽器，我使用picturefill作爲polyfill。

基本上我想要一個總是150px高的全寬橫幅，但是具有不同的尺寸圖像取決於screen width和device pixel ratio。

的問題是，srcset不挑例如banner960x300圖像如果device pixel ratio爲2

這裏是我曾嘗試：

<img srcset="/images/banner480x150.png 480w 1x, 
      /images/banner960x300.png 480w 2x, 
      /images/banner768x150.png 768w 1x, 
      /images/banner1536x300.png 768w 2x, 
      /images/banner992x150.png 992w 1x, 
      /images/banner1984x300.png 992w 2x, 
      /images/banner1200x150.png 1200w 1x, 
      /images/banner2400x300.png 1200w 2x, 
      /images/banner1920x150.png 1920w 1x, 
      /images/banner3840x300.png 1920w 2x" 
    sizes="100%" 
    class="banner" 
    style="width: 100%; height: 150px;"> 

和

<img srcset="/images/banner480x150.png 480w 150h, 
      /images/banner960x300.png 960w 300h, 
      /images/banner768x150.png 768w 150h, 
      /images/banner1536x300.png 1536w 300h, 
      /images/banner992x150.png 992w 150h, 
      /images/banner1984x300.png 1984w 300h, 
      /images/banner1200x150.png 1200w 150h, 
      /images/banner2400x300.png 2400w 300h, 
      /images/banner1920x150.png 1920w 150h, 
      /images/banner3840x300.png 3840w 300h" 
    sizes="100%" 
    class="banner" 
    style="width: 100%; height: 150px;"> 

我我不確定這是否是srcset屬性的正確語法。

Answer 1

我想這是解決方案：

<picture> 
    <source media="(min-width: 1200px)" srcset="/images/banner1920x150.jpg 1x, 
               /images/banner3840x300.jpg 2x"> 
    <source media="(min-width: 992px)" srcset="/images/banner1200x150.jpg 1x, 
               /images/banner2400x300.jpg 2x"> 
    <source media="(min-width: 768px)" srcset="/images/banner992x150.jpg 1x, 
               /images/banner1984x300.jpg 2x"> 
    <source media="(min-width: 480px)" srcset="/images/banner768x150.jpg 1x, 
               /images/banner1536x300.jpg 2x"> 
    <img src="/images/banner480x150.jpg" 
     srcset="/images/banner480x150.jpg 1x, 
       /images/banner960x300.jpg 2x" 
     alt="Awesome banner" 
     class="banner" 
     style="width: 100%; height: 150px;> 
</picture> 

相對150像素高度保持如果device pixel ratio比1x更高的高分辨率圖像被下載。

Answer 2

這不是正確的語法。它似乎是基於舊的，現在已經不存在的srcset規範，它從未在任何地方實現過。

關於你想要達到的目標，你可以用藝術指導和<picture>元素來做到這一點，但除非你能指定每個可能的視口寬度及其相應的圖像（你不能），否則會有視口尺寸在哪裏你的圖像高度不會是一個固定的150像素，所以期望有一些失真。 放寬斷點之間150px高度的要求可能會更好（或者使用CSS剪輯來維護它）。

要做到這一點的語法就像下面的那樣。沒有必要指定sizes，因爲它的默認值是100vw（因此視口寬度的100％，這是您需要的）。

<picture> 
    <source media="(max-width: 480px)" srcset="/images/banner480x150.png 480w, /images/banner960x300.png 960w"> 
    <source media="(max-width: 768px)" srcset="/images/banner768x150.png 768w, 
      /images/banner1536x300.png 1536w"> 
    <source media="(max-width: 992px)" srcset="/images/banner992x150.png 992w, 
      /images/banner1984x300.png 1984w"> 
    <source media="(max-width: 1200px)" srcset="/images/banner1200x150.png 1200w, 
      /images/banner2400x300.png 2400w"> 
    <img src="/images/banner1920x150.png" 
     srcset="/images/banner1920x150.png 1920w, 
      /images/banner3840x300.png 3840w" 
     class="banner" 
     alt="This is an awesome banner!"> 
</picture>