imgwith srcset属性看起来像是做响应式图像的好方法.是否有一个在css background-image属性中有效的等效语法？
HTML
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
CSS
.mycontainer {
background: url(?something goes here?);
}
我一直试图srcset通过浏览器开发人员工具查看我的浏览器使用的图像,但除了使用网络选项卡查看它取出的图像我无法分辨.
使用网络选项卡通常会很好,但有时我注意到它将获取不同大小的2个图像版本,如果一个断点为600而另一个断点为900且浏览器当前宽度为750px,则会发生这种情况.
(我已经在Chrome和FireFox上尝试了这一点,看起来Chrome在某些情况下会拉下这两个图像,但FireFox似乎只能拉下一个)
我想知道的原因是我感兴趣,如果它缩小了两个图像srcset剂量,它会在我缩放浏览器窗口时自动在它们之间交换？这是无法判断的,因为通过检查元素它只提供元素的原始html img,而不是img srcset它使用的实际选项.
我一直在尝试使用以下HTML实现响应式图像的新srcset方法
<img class="swapImages"
srcset="assets/images/content/large.jpg 1200w,
assets/images/content/medium.jpg 800w,
assets/images/content/small.jpg 400w"
sizes="100vw"
src="assets/images/content/small.jpg"
alt="responsive image">
我使用chrome 40,我得到的是最大的图像,调整我的浏览器大小,清除缓存什么都不做.
我读到了我必须填充的地方,所以我使用了picturefill插件,虽然chrome应该支持它.....仍然不起作用.
我为它准备了一个演示页面:http: //www.darrencousins.com/lab/resp-img-srcset/
我做错了什么/没有得到什么？
任何帮助都非常受欢迎.
当我srcset在我的<img />标签上有属性时,为什么它不会出现在浏览器中？它似乎通过React.js剥离它.
<img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />
将视网膜和非视网膜显示到相应的设备,如下所示:
<picture>
<source srcset="non-retina.jpg, retina.jpg 2x">
<img src="non-retina.jpg">
</picture>
作品.但Google Pagespeed Insight告诉它在加载CSS之前无法呈现这一点,我们会受到惩罚.但是,仅在移动视图中 - 这是Pagespeed Insights无论如何渲染Retina图像的唯一情况.
我们完整的CSS文件位于页脚中,因为我们在头部有一个重要的,重要的CSS内联.
但是,此代码无需任何来自Pagespeed Insights的投诉
<picture>
<img src="non-retina.jpg">
</picture>
我们缺少什么？在知道要采用哪个source/srcset-image之前,浏览器是否有必要阅读样式规则？
测试用例:
下面是它的测试页:http://pagespeed-srcset-nopicturefill.slople.com/ ...这是它的结果:https://developers.google.com/speed/pagespeed/insights/?url=http% 3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&标签=移动
我正在使用object-fit: cover一堆图像.图像的框架占据50vw并具有动态高度.封面属性效果很好,但这意味着我真的不知道我的实际图像在给定时间的宽度.
很可能它会比它更宽,50vw并且由于物体贴合的覆盖物会隐藏其溢出.
当我尝试使用srcset时会出现问题.我无法为sizes属性提供可靠的宽度.
我知道这个尺寸只需要一个近似值,但我很好奇是否有人之前处理过这个问题.
我在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">
我也在使用nonPlacehold.it图像在另一个环境中测试它,并使用Picturefill.js http://scottjehl.github.io/picturefill/
我在FF或Safari中都没有任何问题(都使用图片填充).
iOS Chrome也有类似的问题.
我的语法错了吗？有什么事情我不知道吗？
是否有可能srcset在页面加载后重新计算浏览器窗口大小,从而更新其使用的图像.
你想要这样做的原因是因为如果你在桌面上压缩浏览器窗口,加载一个网站,然后使浏览器窗口变大,它就会缩放"small.jpg"(如设置中所示srcset)所以用户最终将获得像素化图像.
我开始制作一个jsfiddle来显示问题,但它运行良好,因为我认为srcset是由浏览器窗口计算,而不是jsfiddle结果网格.
如果您感兴趣,可以将其复制并粘贴到空白html文件中并在本地服务器中运行(必须位于本地http://服务器上,以便您可以查看网络调试选项卡以查看浏览器加载的图像).通过文件URL在浏览器中运行它file:///不会允许您通过网络调试选项卡查看加载了哪个图像.
<body>
<div class="wrapper">
<img
src="http://i.imgur.com/DoWeH0X.jpg?1"
srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w"
alt="#"
>
</body>
</html>
我无法理解如何防止srcset在屏幕上加载任何图像< 768px.
我已经尝试了下面的代码,但尺寸属性似乎没有你想到的.以下加载1024.jpg所有屏幕尺寸:
<img
src="default.jpg"
srcset="img/1024.jpg 1024w"
sizes="(min-width: 768px) 768px, 100vw"
/>
或者是图片元素,如果它会尊重空的srcset,但它只是"暗示"浏览器应该加载哪个图像.
我正在使用React构建我的网站，并且要显示多个图像。使用Google Chrome审核功能运行审核后，我收到了“以下一代格式提供图像”的机会消息。
在阅读了各种格式（WebP，JPEG2000，JPEGXR）之后，似乎只有某些浏览器才支持每种格式。例如，我不能将所有图像都转换为WebP，因为它们不会显示在Safari浏览器中。因此，我的问题是如何根据所使用的浏览器“提供”每种类型的图像？这是我尝试过的：
我有3种类型的文件，jpg，JPEG2000和WebP。每个都像这样被导入：
import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'
然后在我的课堂上，我有一个包含图像的对象数组。要使用图像：
<picture>
<source>
srcSet={`
${project.Imagejpg},
${project.ImageJPEG2000},
${project.ImageWebP},
</source>
<img src={project.imageWebP} alt=""/>
</picture>
现在，如果我仅使用jpg图片，则它在所有浏览器上都可以正常工作，因为大多数浏览器都可以使用jpg。但是，我正在尝试优化网站并使用更好的图像文件类型。有没有办法使用几种类型的文件，或者我缺少什么？