响应图像srcset不表现为预期
我试图实现与下面的宽松要求响应图像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的小
我的理解是,一旦它的加载最大的图像,它不如果你想使某种艺术指导的负载较小的
帮助和赞赏
建议,你需要使用<picture>
inste广告srcset-w
。
顺便说一下,您的代码会遗漏sizes
属性,如果您使用srcset
属性和w
描述符,则该属性是必需的。
如果您没有指定它,则不是强制性的。浏览器会将其尺寸设置为“100vw”。 –
在[HTML5规范](https://html.spec.whatwg.org/multipage/embedded-content)中写明“如果srcset属性具有使用宽度描述符的任何图像候选字符串,则size属性也必须存在”的.html)。 –
在视网膜显示屏上,由于设备像素比率,它始终会加载最大尺寸的图像 –