html – 响应式img从srcset获取错误的图像

发布时间：2020-12-14 16:36:11 所属栏目：资源来源：网络整理

导读：在隐身模式下使用谷歌浏览器进行测试,并且每次都使用“空缓存和硬重新加载”重新加载页面. 我有以下html响应图像： img class="content-img" src="/app/uploads/2018/07/1400x750.png" srcset="/app/uploads/2018/07/1400x750.png 1400w,/app/uploads/2018/0

在隐身模式下使用谷歌浏览器进行测试,并且每次都使用“空缓存和硬重新加载”重新加载页面.

我有以下html响应图像：

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w,/app/uploads/2018/07/1400x750-768x411.png 768w,/app/uploads/2018/07/1400x750-1280x686.png 1280w,/app/uploads/2018/07/1400x750-520x279.png 520w,/app/uploads/2018/07/1400x750-420x225.png 420w,/app/uploads/2018/07/1400x750-340x182.png 340w,/app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw,(max-width: 1399px) 38vw,535px" 
>

预期行为：

1.视口宽度0px – 666px：

>浏览器应采用完整的视口像素宽度,例如450px,并从宽度大于450px的srcset中选择最小的src,在本例中为’/app/uploads/2018/07/1400×750-520×279.png’

2.视口宽度667px – 1399px：

>浏览器应占视口宽度的38％,例如380px @ 1000px视口,并从宽度大于380px的srcset中选择最小的src,在本例中为’/app/uploads/2018/07/1400×750-420×225.png’

3.视口宽度1400像素：

>浏览器应采用默认值535px并从宽度大于535px的srcset中选择最小的src,在本例中为’/app/uploads/2018/07/1400×750-600×321.png’

实际行为：

在谷歌浏览器中进行测试,使用开发工具检查img上的所有上述示例中的元素,在每种情况下得到的“CurrentSrc”是：

> /app/uploads/2018/07/1400×750-520×279.png(正确)
> /app/uploads/2018/07/1400×750-1280×686.png(INCORRECT(预计宽度为420px)
> /app/uploads/2018/07/1400×750.png(INCORRECT(期望600px宽度)

我一直在挠头,其他类似的问题似乎都归结为谷歌Chrome缓存问题,但我在测试时已经小心消除了这个问题,但我仍然没有得到我期望的src图像.

我只有90％确定我已经为我想要的行为写了正确的“尺寸”属性.请注意,由于排列响应式CSS断点并尝试在上下文中加载合理的图像宽度,逻辑稍微复杂一些.

解决方法

有关srcset和sizes属性如何定义浏览器应选择显示哪个图像的方式的一些说明(有关详细信息,请参阅 Responsive images).

首先,浏览器检查sizes属性以查找适用于当前设备宽度的第一个媒体条件.因此,对于您指定的断点,浏览器应以全视口宽度显示所选图像,宽度为666px的设备,然后是667px和1399px宽度之间设备的视口宽度的38％,最后是设备宽度固定为535px大于1399px宽.

其次,浏览器检查srcset属性以找到最接近匹配由size属性确定的图像槽大小的图像(如上所述).

因此,请期望以下内容：

1)对于宽度达666px的设备,浏览器应选择最接近设备宽度的图像宽度(不是最大图像大于设备宽度).

例子：

在450px宽的设备上,浏览器应选择420w图像.

在599像素宽的设备上,浏览器应选择600w图像.

2)对于667px到1399px宽的设备,浏览器应选择最接近设备宽度38％的图像宽度.

例子：

在1000px宽的设备上,浏览器应选择340w图像或420w图像(由于媒体查询确定的图像插槽大小为380px,因此在分割差异时不确定它的选择方式)

在1366px宽的设备上,浏览器应选择520w图像(因为媒体查询确定的插槽大小为519px)

3)对于宽度超过1399px的设备,浏览器应选择520w图像(因为媒体查询确定的插槽大小是固定的535px).

注意：Retina和其他高分辨率显示器会稍微改变数学运算,导致浏览器在上述每个示例中或多或少地将其选择的图像宽度加倍(见Responsive images: if you’re just changing resolutions,use srcset).

有两个潜在的问题需要仔细检查.确保你有< meta name =“viewport”content =“width = device-width”>在头部,所以你加载页面时,你测试的设备被迫采用它们的实际宽度.另外,请确保没有冲突的css或js干扰图像的显示.

如果您已经避免了陷阱,那么您的代码看起来很好,下面的类似代码段给出了我预期的结果,尽管您在测试时必须小心缓存,因为您已经注意到了(稍微不同的组织可能会帮助您更快地扫描哪些应根据不同情况选择图像).下面是一个使用占位符图像的片段,显示了它们的宽度,可以帮助您进行测试.

<img srcset="https://via.placeholder.com/340x182 340w,https://via.placeholder.com/420x225 420w,https://via.placeholder.com/520x279 520w,https://via.placeholder.com/600x321 600w,https://via.placeholder.com/768x411 768w,https://via.placeholder.com/1280x686 1280w,https://via.placeholder.com/1400x750 1400w"
     sizes="(max-width: 666px) 100vw,535px"
     src="https://via.placeholder.com/340x182"
     alt="placeholder image">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!