Chrome不显示合适的srcset图片

本文介绍了Chrome不显示合适的srcset图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我试图在Chrome上使用img srcset属性，但它不显示srcset合适的图片。我使用两种不同的1x设备在Linux（Chromium 41）和Windows（Chrome 42）上测试它。我设置了两张图片：512px和1054px宽的图片。但Chrome浏览器仍然在734px或更低的视口宽度下显示512px图片，在735px或更高时仍显示1054px图片。 它可以很好地适用于Firefox（在config中启用srcset）。 > 为什么Chrome在视口宽度高于512像素时显示512像素照片？ $ b body {background- color：＃000;} img {max-width：100％;} < img srcset =http://download.blender.org/institute/logos/blender-socket.png 512w，http://download.blender.org/institute/BlenderDesktopLogo.png 1054wsizes = 100vw> $ b http://codepen.io/anon/pen/dooQvJ 解决方案铬问题一直存在关于升级问题： https://code.google。 com / p / chromium / issues / detail？id = 456084 加大似乎是实际的Chromium算法来显示srcset图片： 升级是按设计进行的。作为过度下载和图像质量的妥协，我们在资源的几何平均值之间画出一条线。我们可能会根据网络条件，用户偏好，当前DPR等来改变未来的行为。 I'm trying to use img srcset attribute with Chrome, but it does not display srcset suitable picture. I test it on Linux (Chromium 41) and Windows (Chrome 42) with two different 1x devices.I set up two pictures: 512px and 1054px wide pictures. But Chrome still displays 512px picture at 734px or less viewport width and 1054px picture at 735px or more.It works fine with Firefox (enabling srcset in config).Why Chrome displays 512px picture when viewport width is higher than 512px ?body { background-color: #000;}img { max-width: 100%;}<img srcset=" http://download.blender.org/institute/logos/blender-socket.png 512w, http://download.blender.org/institute/BlenderDesktopLogo.png 1054w" sizes="100vw">Codepen link :http://codepen.io/anon/pen/dooQvJ 解决方案 A chromium issue have been opened about upscaling issue :https://code.google.com/p/chromium/issues/detail?id=456084Upscaling seems to be actual Chromium algorithm to displays srcset pictures: The upscaling is by design. As a compromise between over-downloading and image quality we "draw a line" between the resources at their geometric mean. We may change that behavior in the future based on network condition, user preferences, current DPR, etc. 这篇关于Chrome不显示合适的srcset图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！