圖srcset加載圖像時，瀏覽器的一半圖像尺寸

（使用最新版本的Firefox）的圖srcset加載圖像時，瀏覽器的一半圖像尺寸

我有我寫的img像這樣：

<body> 
    <script> 
     function imageLoaded(img) { 
      console.log('the responsive image is loaded'); 
      img.className += ' loaded'; 
     } 
    </script> 

    <img class="backgroundImage" 
     onload="imageLoaded(this)" 
     src="assets/water_bg_1920.jpg" 
     sizes="100vw" 
     srcset="assets/water_bg_2560.jpg 2560w, 
       assets/water_bg_1920.jpg 1920w, 
       assets/water_bg_1024.jpg 1024w"/> 
</body>

和我CSS-

@keyframes fadeIn 
    0% 
    opacity: 0 
    100% 
    opacity: 1 

.backgroundImage 
    opacity: 0 

.loaded 
    opacity: 1 
    animation: fadeIn 3s

當我的瀏覽器是在960px，它加載1920圖像。在512px它加載1024圖像。任何更高的和它加載2560圖像。

我，究竟如何它決定在這些寬度加載這些圖像時，我有sizes設置爲100vw很困惑。不應該使用1024圖片，直到瀏覽器寬度爲1024px，1920圖片的瀏覽器寬度從1024px - 1920px和2560 img的任何一個更高時？我在這裏誤解了什麼嗎？

編輯：行爲也發生在Chrome的最新版本，除了在除了原有的問題它裝載在此外較小的圖像 - 每次到2560形象！

edit2：最新版本的Safari的行爲與Firefox相同。

編輯3：發現一個fiddle由別人測試。它的行爲方式相同（在瀏覽器寬度爲圖像大小的50％之前不使用較小的圖像）。這是一個錯誤？或預期的功能srcset & sizes？

來源

2016-09-28 shanling

需要看到代碼此功能：'imageLoaded（本）'和可能的'.backgroundImage' CSS爲好。 – zer00ne

我編輯了原帖。對不起，我不認爲它們是相關的。 – shanling

不用擔心，我認爲這個功能可能會讓你失望，讓我們來看看...... – zer00ne

好了，好了（其中有大約與一箇舊的Safari瀏覽器版本異常的同樣的支持）是使用<picture>標籤等，從而爲我工作的解決方案：

<picture class="backgroundContainer"> <source srcset="assets/water_bg_1024.jpg" media="(min-width: 0px) and (max-width:1024px)"> <source srcset="assets/water_bg_1920.jpg" media="(min-width: 1025px) and (max-width: 1920px)"> <source srcset="assets/water_bg_2560.jpg" media="(min-width: 1921px)"> <img class="backgroundImage" onload="imageLoaded(this)" src="assets/water_bg_1920.jpg" alt=""> </picture>

它加載所有的圖像在所有最新版本的瀏覽器的正確斷點處正確顯示。

來源

2016-09-28 21:06:10 shanling

我的工作更加理智，媒體查詢和sizes上設置的長度。我在iPhone上看到img突破2560w，但那是因爲視網膜的像素密度。爲了讓斷點更緊密，您需要添加更多的媒體查詢。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>sizes</title> 
 
</head> 
 

 
<body> 
 
    <img src="http://placehold.it/1024x576/000/fff?text=1024w" sizes="(min-width: 36em) 33.3vw, 100vw" srcset="http://placehold.it/2560x1280/00f/fc0?text=2560w 2560w, http://placehold.it/1920x1080/e00/fcf?text=1920w 1920w, http://placehold.it/1024x576/000/fff?text=1024w 1024w" /> 
 
</body> 
 

 
</html>

來源

2016-09-28 21:29:55 zer00ne

圖srcset加載圖像時，瀏覽器的一半圖像尺寸

回答

相關問題