响应式图像在移动浏览器中无法正确加载
Flo*_*bin 11 html css responsive-design responsive-images responsive
我有一个包含标题图像的网站。
\n然而，当我在 iOS 上的 Firefox 或 Safari 中加载网站时，这些标题图像一开始似乎没有加载。这里\xe2\x80\x99是截图：
\n
当我单击菜单中的不同页面时，会加载标题图像。为什么它们一开始不加载？
\n在 Safari 中从我的 iPhone 进行调试显示以下内容：
\n
我认为这可能与正在加载的图像是 pruimendijk_oeverwoning_2560.jpg 文件这一事实有关，这不是我试图在移动设备上加载的文件。
\n这是相关的html：
\n<figure class="cover">\n <img src="/img/pruimendijk_oeverwoning_01_2560.jpg"\n srcset="/img/pruimendijk_oeverwoning_01_768.jpg 768w,\n /img/pruimendijk_oeverwoning_01_1024.jpg 1024w,\n /img/pruimendijk_oeverwoning_01_1440.jpg 1440w,\n /img/pruimendijk_oeverwoning_01_1920.jpg 1920w,\n /img/pruimendijk_oeverwoning_01_2560.jpg 2560w"\n sizes="(max-width: 768px) 768px,\n (max-width: 1024px) 1024px,\n (max-width: 1440px) 1440px,\n (max-width: 1920px) 1920px,\n 2560px"\n alt="Een woning in Hof van Waelsicht"\n class="cover-img">\n</figure>\n这是相关的 scss：
\n.cover {\n padding: 0;\n margin: 9rem 0 0 0;\n @include at-least ($S) {\n margin-top: 6rem;\n }\n @include at-least ($M) {\n margin-top: 2.5rem;\n }\n @include at-least ($M) {\n margin-top: 0;\n }\n}\n\n.cover-img {\n display: block;\n width: 100vw;\n height: 100%;\n max-height: 87vh;\n object-fit: cover;\n}\n.cover-empty {\n height: 20rem;\n &+.page-title {\n background: none;\n .page-title-text {\n color: $text-color;\n }\n }\n}\n难道是srcset我\xe2\x80\x99ve格式化的方式不对？
使用稍微不同的方法，但仍然达到相同的结果，可以如下所述：
（这是 Michele De Falco 在评论中提出的建议）
我使用相同的资产和相同的检查点制作了一个演示，您可以看到，这种方式正确匹配了媒体条件，而不是使用 和srcset属性sizes在<img>元素上的做法，而不是使用<source>嵌套在 Parent 中的子项<picture>。
您可以运行扩展的演示并更改设备模拟中的水平分辨率，并查看它如何根据分辨率实时渲染不同的资源：
<head>
<base href="https://hofvanwaelsicht.nl/">
</head>
<body>
<picture>
<source media="(max-width: 768px)" srcset="/img/pruimendijk_oeverwoning_01_768.jpg" />
<source media="(max-width: 1024px)" srcset="/img/pruimendijk_oeverwoning_01_1024.jpg" />
<source media="(max-width: 1440px)" srcset="/img/pruimendijk_oeverwoning_01_1440.jpg" />
<source media="(max-width: 1920px)" srcset="/img/pruimendijk_oeverwoning_01_1920.jpg" />
<!-- default behaviour (when the media conditions are not met, this will be the asset loaded) -->
<img src="/img/pruimendijk_oeverwoning_01_2560.jpg" />
</picture>
</body>