Google Chrome 40 版 srcset 属性问题 [英] Google Chrome version 40 srcset attribute problems

问题描述

我发现 Chrome 40.0.2214.91 中 img 标签(响应式图片)上的 srcset 属性存在很多不一致

在我更新到 Chrome v40 之前(我在 ~39 上)，srcset 属性工作正常并且会在浏览器调整大小时交换图像.现在，有时，如果我将浏览器设置为所需的宽度然后刷新页面，则会显示较小版本的图像.其他时候它不会起作用.

测试jsbin:

我在 FF 或 Safari(均使用图片填充)中没有任何问题.

iOS Chrome 也有类似问题.

我的语法错了吗?有什么我不知道的事情吗?

解决方案

这是一个功能而不是一个错误.Chrome 不会切换大小，因为 Chrome 缓存中已经有更大的图像，因此无需下载相同图像的新数据.

如果您想使用不同的图像或具有不同裁剪的相同图像，请使用图片元素.

响应式图像在技术上可以区分为两种类型.

• 带有源描述符的srcset(让浏览器根据屏幕大小/分辨率、带宽……选择正确的图像):
  • 密度描述符 (x)(对于静态图像尺寸、视网膜与正常分辨率)
  • 宽度描述符 (w) 和相应的尺寸属性(用于灵活、响应式/自适应图像(自动还包括 Retina 优化)
• 以及带有 source[media] 子元素的图片元素(让作者控制浏览器应根据特定媒体查询选择哪个 srcset)

所以 img[srcset] 用于分辨率切换，picture 用于对您的设计做出反应的不同图像

I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91

Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.

Testing jsbin: http://jsbin.com/hulaconake/1/edit?html,output

Image tag I have:

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/

I'm not having any issues in FF or Safari (both using picturefill).

iOS Chrome has similar problems.

Is my syntax wrong? Is there something going on I don't know about?

解决方案

It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.

In case you want to use different images or same image with different crops, use the picture element.

Responsive images can be technically differentiated between 2 types.

• srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
  • density descriptor (x) (for static image sizes, Retina vs. normal resolution)
  • width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
• and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)

So img[srcset] is for resolution switching and picture is for different images reacting to your design

这篇关于Google Chrome 40 版 srcset 属性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！