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

问题描述

在Chrome 40.0.2214.91中，img标签（响应图片）上的srcset属性出现很多不一致之处

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

测试jsbin：
http：// jsbin.com/hulaconake/1/edit?html,output

图片标签我有：

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

我也在另一个env中使用non-Placehold.it图像测试这个，并使用Picturefill.js http://scottjehl.github.io/picturefill/

我在FF或Safari中没有任何问题（都使用图片填充）。

iOS Chrome有类似的问题。

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

解决方案

这是一个功能而不是bug。 Chrome不会切换大小，因为Chrome已经在缓存中拥有更大的图片，因此无需下载同一图片的新数据。

如果你想使用不同的图像或不同作物的相同图像，请使用图片元素。

响应式图像可以在技术上区分2种类型。

• 带源描述符的srcset（让浏览器根据屏幕大小/分辨率选择正确的图像，带宽...）：
  
  
  
  • 密度描述符（x）（对于静态图像大小，视网膜与正常分辨率）
    
  • 宽度描述符w）和相应的尺寸属性（对于灵活的，响应/自适应图像（自动还包括视网膜优化），b $ b
，

• 它的源[媒体]儿童（给出作者控制什么srcset应该由浏览器根据具体媒体查询选择）

img [srcset] 用于分辨率切换，图片用于响应您的设计的不同图像

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屋！