问题标签 [srcset]

我正在尝试实现艺术指导并使<picture>元素在移动设备上显示方形图像，在所有其他设备上显示横向图像。<img>出于某种原因，当 Safari 应该能够识别<source srcset="">我在这里给出的值时，它会一直退回到标签。

这似乎可以在 chrome 中找到，但是谁能解释为什么 Safari 会忽略这些 srcset 属性以及如何让它在 Safari 9 中工作？谢谢！

我在使用 srcset 时有一种奇怪的行为，我很难理解它。我已经完成了 CodePen：http ://codepen.io/anon/pen/dYBvNM

问题是我有一组不同尺寸的图像（由 Shopify 生成）：240 像素、480 像素、600 像素和 1024 像素。问题是这些是最大尺寸。这意味着如果商家上传较小的图片（比如 600 像素），则 1024 像素版本将是 600 像素，而不是 1024 像素。我不能提前知道，所以我不得不简单地将所有尺寸添加为“最佳情况”：

当图像确实小于预期的最大尺寸时，就会发生奇怪的事情。在这种情况下，浏览器会正确选择适当的图像（在这种情况下，它将选择 15' Retina 上的 1024 版本），但由于图像实际上小于 1024px（我已经指出的大小），浏览器实际上是将图像的大小调整为小于其原始分辨率。

您可以在 CodePen http://codepen.io/anon/pen/dYBvNM中比较这两个图像是 1024px 版本，但是在使用 srcset 的那个中，渲染实际上比仅使用 src 小。我本来希望它会以原始分辨率保留图像。

你能解释一下为什么会这样吗？

谢谢！

Wordpress 使用以下行定义了 media.php 中新 srcset 属性中包含的最大分辨率：

有没有办法从我的主题functions.php中更改该值（通过钩子等）？现在我在 media.php 本身中更改了它（不推荐 - 我知道......）。

在 SO 上 Bootstrap 有几个居中问题，但我没有找到我的确切问题。

我的网站可以在http://project.livestagingserver.com/test.html查看

这是代码：

我的问题是无论我尝试什么，mainImage 都没有居中。我不知道我是否正确实施了 srcset，但网站上的其他图像都很好。

我已经打开了边框，你可以看到主图像在左边是如何关闭的。

我这里有个谜。这个问题本身现在已经解决了，但我仍然看不到真正的原因：在我们的图像共享网站 Pixabay上，我们最近在搜索结果中实现了标签的srcset属性。img你可以在这里看到它的实际效果：https ://pixabay.com/photos/

那里的典型img标签如下所示：

它工作得非常好 - 大约 99% 的用户都使用它。但是，一些报告看到此屏幕截图中描述的问题：

页面上正确加载了大约 30-50 个图像，而其他图像则导致图像损坏。我们意识到，我们的 NGINX 日志包含一些这样的错误：

显然，由于未知原因，客户端请求整个表达式（src的值+“srcset”的值+srcset的值）作为图像路径，这当然导致了错误404。

我们玩了一下并意识到，首先提供标签上的属性srcset然后解决问题。没有更多的错误日志，没有更多的投诉。srcimg

我在网络上的任何地方都找不到有关此行为的任何报告。但我想了解更多。以下是在Pixabay上与几位用户报告该问题的讨论：https ://pixabay.com/en/forum/help-me-please-11/pixabay-technical-difficulties-1474/?pagi=2

你有解释吗？

当使用<img>没有断点（即没有sizes属性）的响应式图像集时，您通常会提供不同分辨率的同一图像的多个版本，然后srcset使用像素密度语法在属性中定义这些版本，例如1x，2x3x

但是，通常1x图像的版本只是src属性中已经定义的同一个图像，所以有点多余。因此我想知道 -在参数中定义的1x版本真的有必要/强制性吗？<img>srcset

仅使用时

代替

那么至少 FireFox 将正确显示350x150图像，并且一旦缩放级别/dppx> 1将使用700x300图像。

省略 1x 定义srcset将节省一些字节，尤其是在具有大型缩略图库的页面上。

我想使用 srcset 实现响应式图像，如此处所述，因此用户加载的图像 src 与他的分辨率最相似。

问题是我做了这个测试，它没有响应视口的变化，

jsfiddle：http: //jsfiddle.net/ad857m1r/9/

知道我错过了什么吗？

当我的标签srcset上有属性时<img />，为什么它不显示在浏览器中？似乎通过 React.js 正在剥离它。

这个问题是这里问题的变体：如果调整浏览器窗口大小，是否可以重新计算使用的 `srcset` 图像？

基本上我的网站使用带有多个图像的动态滑块，我只能使用saya.class img而不是ID来定位图像。此外，还有多个带有该 a.class 的 img 需要修改。

当浏览器窗口调整大小时，如何使用 jQuery 或常规 javascript 让浏览器更新到新的 srcset？最好只在窗口调整大小超过几个触发点时才这样做，例如在宽度点 1170px 和 1000px 处。

换句话说，有没有办法使用 jQuery 让 srcset 像艺术指导一样运作？我无法改用该<picture>元素或替代品。

所以每个图像都用以下代码包装：

（此代码在多个方面重复）

谢谢您的帮助！

我正在查看此页面以供参考

我试图开始工作的代码看起来像这样

使用 scrset加载不同图像的演示似乎不适用于 safari 9，但它在 chrome 中运行良好。我的印象是自 safari 9 和 iOS safari 8 以来 safari 和 iOS 现在已经实现了 scrset 属性。

目前 safari 9 正在加载 specto1-old.png 而 chrome 正在加载 specter1@1.png

有人可以解释为什么该演示适用于 chrome 而不是 safari 吗？

编辑： Idk 我是如何如此糟糕地屠杀了这个小家伙。“Safari 使用 srcset 和图片标签是否无法正确显示图像？”