响应图像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不表现为预期

回答

相关问题