爲什麼響應式圖像關閉（我的）現實？

我想實現一個簡單的任務。
我有一個圖像在一個可變寬度的容器。
容器的寬度可以爲300,400,700或900像素。這是通過媒體查詢手段完成的圖像應占用該容器的所有寬度。因此，它也將是300,400,700或900像素寬。圖像應該具有所有寬度值的不同來源。所以我可以在手機上使用較小的圖像。爲什麼響應式圖像關閉（我的）現實？

我認爲這可以通過img元素的srcset屬性完成，也許在sizes屬性的幫助下完成。寬度是這樣的

<img src="http://dummyimage.com/300x200/abc/000" 
     alt="dummy" 
     srcset=" 
     http://dummyimage.com/900x200/abc/000 900w, 
     http://dummyimage.com/700x200/abc/000 700w, 
     http://dummyimage.com/400x200/abc/000 400w, 
     http://dummyimage.com/300x200/abc/000 300w 
     " 
     />

但它不以這種方式工作，因爲瀏覽器的比例選擇了圖像顯示端口的寬度，而不是該圖像本身的。
使用來自http://scottjehl.github.io/picturefill/的圖片填充填充的示例：http://codepen.io/HerrSerker/pen/itBJy。這不起作用，因爲它將採用下一個尺寸的圖像。

我當然可以考慮到這一點，並改變我srcset這個

 srcset=" 
     http://dummyimage.com/900x200/abc/000 999999w, 
     http://dummyimage.com/700x200/abc/000 900w, 
     http://dummyimage.com/400x200/abc/000 700w, 
     http://dummyimage.com/300x200/abc/000 400w 
     "

這將在桌面上工作，但無法在Retina顯示屏，因爲設備的像素比例是考慮到這裏，但以與媒體查詢不同的方式。它沒有用，因爲圖像應該知道視口的寬度和相同的寬度，並且在編譯時？沒門。圖片我在網格系統中使用圖像。如果我在桌面設備上的3列網格和智能手機上的1列網格中，圖像具有不同的寬度。這不應該由圖像負責調整寬度和視口寬度的比例。

我對sizes屬性也沒有任何好運（這裏沒有例子）。原因與上面相同。在尺寸attibute中，我說根據媒體查詢，我的圖像的寬度應該是多大。這是如此關閉。圖像應該如何知道？

所以我來解決這個問題。我使用與srcset屬性本身相同的語法設置了data-srcset屬性，但使用自定義JavaScript編程。示例在這裏：http://codepen.io/HerrSerker/pen/tCqJI

jQuery(function($){ 
    var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g; 
    var regw = /(.*)w/; 
    var sets, $set, set, myMatch, i, w, that, last; 

    var checkData = function() { 
    $('img[data-srcset]').each(function() { 
     that = $(this); 
     $set = that.data('srcset'); 
     sets = []; 
     while(myMatch = reg.exec($set)) { 
     set = {}; 
     set.src = myMatch[1]; 
     set.w = (myMatch[2].match(regw))[1]; 
     sets[set.w] = set; 
     } 
     w = that.width(); 
     last = 0; 
     for (i in sets) { 
     last = i; 
     if (w <= i) { 
      that.attr('src', sets[i].src); 
      return; 
     } 
     } 

     that.attr('src', sets[last].src); 
    }); 
    }; 


    checkData(); 
    $(window).on('resize', checkData); 
});

這有效，但感覺不對。但也許並非如此，正如規範所說，響應式圖像的行爲就像它所做的那樣。但我覺得這是錯誤的方式。 90％的用於響應式圖像的用例不符合規範。

所以我錯了嗎？我沒有以定義的方式使用srcset嗎？我是否錯誤地理解了該規範？ W3C和響應式圖像社區小組是否以這種方式思考現實？

來源

2014-10-02 HerrSerker

有這樣的腳本已經出來幾年了。我認爲最好的選擇是adaptive-images php，它可以爲不同的設備服務器端提供正確的大小，不需要jquery或更改標記。或者你可以使用另一種服務器端技術，例如移動檢測並更改html。 – Christina 2014-10-02 16:30:08

較小圖像縮小版本的較大圖像嗎？還是他們裁剪（藝術指導）？如果是後者，則應使用picture和source media。

瀏覽器只使用視口決定要下載哪個圖像的原因是，它是瀏覽器想要下載圖像時唯一可用的。 CSS（可能）尚未下載。因此，如果您使用srcset + sizes，則必須在sizes中重複斷點和圖像寬度。

來源

2014-10-06 06:57:47 zcorpan

在這種情況下，他們是藝術指導。但它不應該。所有的作者和瀏覽器應該知道的是圖像的寬度。我嘗試過使用圖片元素，但在我看來，它比srcset方法沒有任何好處更復雜。而我無法達到我想要的。當然，我在我的html頭部有我的css，所以當時的css *被加載。 – HerrSerker 2014-10-06 07:03:13

它確實很重要。如果你做藝術指導，你不應該使用srcset，因爲使用srcset，瀏覽器可以自由選擇任何想要的資源。對於藝術方向你想要更好的控制，對吧？ – zcorpan 2014-10-07 09:54:06

當然我想要更好的控制。但是'圖片'並沒有給我。這一切都與媒體查詢有關，但我需要涉及圖像寬度，視口寬度。 – HerrSerker 2014-10-07 09:56:15

這個問題似乎是的Responsive full width image banner with fixed height using srcset

就像zcorpan說重複的，你正在嘗試做下的「藝術指導」用例（因爲不同的圖像具有不同的比例）下降，所以你應該使用<picture>元素，而不是srcset。有關語法示例，請參閱其他問題的答案。

來源

2014-10-06 07:28:08

這不是重複的。我不想在我的情況下全幅圖像。我希望圖像是周圍容器元素的100％。而這是通過媒體查詢選擇的「圖片」無法實現的。 – HerrSerker 2014-10-06 08:59:02

爲什麼響應式圖像關閉（我的）現實？

回答

相關問題