Question

我的目标是为同一张图片提供不同版本（分辨率/尺寸）的图像，这些图像应占据视口宽度的100％，因此我可以为移动设备（或通常较小尺寸的设备）提供800px版本显示器或连接速度较慢的设备），1366像素及更高的分辨率到大型桌面显示器。

问题是我正在使用Chromium设备模拟器进行测试，并且某些小屏幕设备加载了1366px版本而不是800px：iPhone 6/7/8（宽度375px）加载了800px图像，但是iPad （768px），Nexus 5（360px）和iPhoneX（375px）都加载了1366px，而不是加载了800px。

我对正确理解sizes指令不是很自信，这是我的代码，默认的src引用2880px版本只是为了帮助测试：

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

Answer 1

您的sizes属性告诉浏览器，图像始终显示为整个视口宽度，因此您可以简单地将其替换为sizes="100vw"。

因此，浏览器采用当前视口宽度，将其乘以屏幕密度，然后为其提供所需图像的宽度。然后，它从srcset中的列表中获取最接近的图像。

您不能使用它“为移动设备提供800像素的版本”，因为当今大多数移动设备的密度都比台式设备大，并且您无法使用<img srcset… sizes…>来阻止它。

如果您真的要忽略屏幕密度（出于什么原因？），并且：

为小型设备提供最小的图像，
为中等设备提供中等图像
为大型设备提供大图像
保留最大图像作为后备广告

然后，您必须对此类媒体查询使用<picture>：

html <picture> <source media="(max-width: 800px)" srcset="img/dreamstime_800w_109635242.jpg 800w"> <source media="(max-width: 1366px)" srcset="img/dreamstime_1366w_109635242.jpg 1366w"> <img src="img/dreamstime_2880w_109635242.jpg"> </picture>

Answer 2

这与视网膜显示器（我认为是其DPI）有关。

根据我所听到的，视网膜显示器将根据其各自的视网膜显示器（2x，3x等）来选择第一张图像，其宽度是其显示宽度的两倍或三倍。

另一个简单的解决方案是清除浏览器缓存。如果您最大和最坏的图像已经被缓存，则Chrome（例如）将始终加载该图像。

Answer 3

对于将来的读者-我很难理解srcset为什么完全忽略了我的尝试。经过数小时的挫折和愤怒，我得到了世界上最明显的答案-我正在使用Retina Macbook Pro，并且没有触发像素密度。

我将其更改为

<img class="<?= $image_class;?>" data-caption="<?php echo $image['alt']; ?>"
data-src="<?php echo $image['sizes']['medium']; ?>"
data-srcset="<?php echo $image['sizes']['medium']; ?> 600w 2x, 
<?php echo $image['sizes']['large']; ?> 1280w 2x"
sizes="(min-width: 150px) 600px, 100vw"
width="150" height="150"
alt="<?php echo $image['alt']; ?>">

一切正常-至少我能弄明白正在发生什么。 ew 圣诞快乐大家！

Answer 4

使用Chrome模拟器测试我的网页时，有时发现（像您一样），显然是在加载大于所需大小的图像，尤其是在小型移动设备上。我终于意识到这不是我的错误，但是Chrome恰好在其中从缓存中拉出了更大的图像。单击模拟器中的复选框以在测试时禁用缓存，问题消失了，实际上我已经加载了我期望看到的大小。

srcset-响应图像加载错误的文件

4 个答案: