響應圖像srcset不表現爲預期

0-600px>顯示小圖像的full screen responsive image solution
601-900px>顯示
901-2000px>顯示大中型圖像圖像

位挖掘之後，我決定與尺寸爲工作：
iphone 6> 414x736
的ipad> 768×1024

我創建單獨的圖像，每個屏幕尺寸（藝術指導目的），並用於下面的srcset代碼

<img src="/assets/images/414X736/artGallery.jpg" 
     srcset="/assets/images/414X736/artGallery.jpg 414w, 
       /assets/images/768x1024/artGallery.jpg 768w, 
       /assets/images/1920x1080/artGallery.jpg 1920w">

的圖像具有下面的CSS （因此，它的行爲象背景：蓋）

img { 
    display:block; 
    height:100vh; 
    width:100vw; 
    object-fit:cover; 
}

我大小我的桌面顯示器小，調整到全屏幕，在正確的地方

取代圖像

然而，在我的手機和平板電腦，它始終顯示1920圖像

理想情況下，我想substitue圖像從小縮放瀏覽器窗口時到大，大到srcset的小

我的理解是，一旦它的加載最大的圖像，它不如果你想使某種藝術指導的負載較小的

幫助和讚賞

來源

2017-02-26 sygad1

在視網膜顯示屏上，由於設備像素比率，它始終會加載最大尺寸的圖像 –

建議，你需要使用<picture> inste廣告srcset-w。

順便說一下，您的代碼會遺漏sizes屬性，如果您使用srcset屬性和w描述符，則該屬性是必需的。

來源

2017-03-24 13:39:36

如果您沒有指定它，則不是強制性的。瀏覽器會將其尺寸設置爲「100vw」。 –

在[HTML5規範]（https://html.spec.whatwg.org/multipage/embedded-content）中寫明「如果srcset屬性具有使用寬度描述符的任何圖像候選字符串，則size屬性也必須存在」的.html）。 –

響應圖像srcset不表現爲預期

回答

相關問題