任何人都可以看到我要去哪裏錯了這個srcset？

我正在構建一個響應式Wordpress網站。博客Feed中有一個包含標題和圖片的故事列表。的圖像尺寸應該如下：任何人都可以看到我要去哪裏錯了這個srcset？

高達479px寬 - 140x140px（故事顯示在列表中）
超過480像素寬 - 360x190px（故事顯示在第3行）

我一直在嘗試使用SRCSET，因此140x140px圖像將被加載到瀏覽器高達479px，360px圖像將被加載瀏覽器480px及以上。

我已經用google和字面閱讀了關於尺寸和srcset的每篇文檔，但我無法理解它。到目前爲止，我想出了以下內容：

<img 
 
    src="http://placekitten.com/140/140" 
 
    srcset=" 
 
    http://placekitten.com/140/140 140w, 
 
    http://placekitten.com/360/190 360w" 
 
    sizes=" 
 
    (max-width: 479px) 140px, 
 
    (min-width: 480px) 360px, 
 
    100vw" 
 
    alt="" 
 
    class="lazyload" 
 
/>

不幸的是這一切都在每一個寬度，顯示360x190px儘管圖像被設置爲140x140px圖像的實際SRC。

任何人都可以看到我錯過了什麼嗎？我認爲這是我最困惑的尺寸。我在媒體查詢中添加了類似文檔，但似乎並未應用？

謝謝！

來源

2017-10-20 Ali Green

請分享您的**生成的標記**。 PHP是一種服務器端語言，不能由代碼片段呈現。 – Terry

嗨！我已經更新它使用placekitten圖像，但我不知道它的工作？我只在本地運行，所以代碼只是我正在使用的一個例子。 –

您正在使用哪種瀏覽器？你的代碼在這個問題上適合我。 –

注意這srcset戰略<img>元素取決於瀏覽器已經不緩存圖像尚未的事實。該策略旨在爲瀏覽器節省帶寬。所以，如果你從一個寬視口開始，瀏覽器只是獲取兩幅圖像中較大的一幅，即使你調整大小，它也不會再回落到較小的一幅。

如果要強制瀏覽器在不同的視斷點載入圖像，使用<picture>代替：

<picture alt="" class="lazyload"> 
 
    <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" /> 
 
    <img src="https://via.placeholder.com/140x140" /> 
 
</picture>

來源

2017-10-20 14:30:31 Terry

謝謝您的回覆！不幸的是，我試圖複製並粘貼該代碼以進行測試，並且當我的瀏覽器不到479px時，它仍然顯示360px寬的代碼。這就是我邏輯上認爲它應該工作 - 高達479px然後使用140px圖像，然後使用360px圖像，但是它似乎忽略它。我已嘗試使用隱身模式，只是將其緩存但沒有運氣！ –

@AliGreen它可以工作，但您必須先以較低的分辨率對其進行測試並清除緩存。想一想：當瀏覽器具有更高分辨率的圖片版本時，即使縮小視口，它也不會縮小到較小的圖片。 – Terry

我正在測試視網膜Macbook Pro - 這是2x分辨率不是嗎？我認爲這可能是問題，但我在130px寬的Chrome中檢查（使用響應式工具），仍然以360px的寬度出現 - 非常奇怪！ https://imgur.com/a/RVLjx –

查看下面的代碼。

<picture> 
 
       <source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190"> 
 
      </picture>

來源

2017-10-20 14:27:00 izulito

任何人都可以看到我要去哪裏錯了這個srcset？

回答

相關問題