Question

我正在尝试使用以下宽松要求实现full screen responsive image solution

0-600px>显示小图像
601-900px＆gt;显示媒体图像
901-2000px>显示大图像

经过一番挖掘后，我决定使用尺寸： iphone 6＆gt; 414x736
ipad＆gt; 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年的图像

理想情况下，我希望在将浏览器窗口从小到大，从大到小缩放时替换图像

我对srcset的理解是，一旦加载了最大的图像，它就不会加载较小的图像

帮助和建议表示赞赏

Answer 1

如果您想制作某种艺术指导，需要使用<picture>代替srcset-w。

顺便说一句，您的代码错过了sizes属性，如果您将srcset属性与w描述符一起使用，则必须使用该属性。

响应式图像srcset表现不尽如人意

1 个答案: