我正在开发由另一位开发人员创建的 WordPress 网站，并且由于 WordPress 更新，自定义主题在某些地方已经损坏。我已经设法解决了大多数问题，但这个问题让我很困惑，主要是因为我不确定它最初是如何工作的！我对 PHP 和 WordPress 还很陌生，我的大部分经验都是在 HTML/CSS 中......无论如何，我已经不得不修改这段代码来解决一些问题，它在现场网站上的当前状态是：

有一个主产品图像和一些缩略图，单击缩略图会更改主产品图像。

有几个问题。

1. WordPress 中使用 srcset 的新响应式图像功能破坏了单击拇指时主图像更改的功能，它继续显示主图像。检查结果时，我可以看到 img src 正在按预期更改，但 srcset 继续显示原始内容。如果禁用响应式图像，它可以工作。
2. 此代码提取导致加载问题的图像的最大版本。

我试图通过将 更改为<?php echo $row->guid;?>来解决第二个问题<?php echo wp_get_attachment_image($attachment_id, 'thumbnail');?>。这会按预期加载拇指，所以我认为这是一个可行的解决方案，但这给我留下了主图像没有改变的问题（除非禁用响应图像）。

所以在我试图找到解决方案的本地机器上，它现在看起来像这样：

问题是，我不确定原始代码是如何导致主图像发生变化的，所以我不确定如何修复它。例如<a data-full=……在做什么？？编辑：认为我发现数据完整更改了带有“完整”类的主图片，对吗？

有人可以向我解释单击缩略图时原始代码如何更改主图像，如果可能的话，有任何关于如何解决 srcset 问题的提示吗？

单击拇指后检查主图像时：

src 正确，srcset 不正确，图片显示的是 srcset 版本。

编辑： 我现在在实时站点上有几乎可以工作的代码，但禁用了响应式图像。我想让响应式图像正常工作，但除非有人能提供帮助，否则我想我将不得不承认失败并就此罢手！

有人可以向我解释calc(.333 * (100vw - 12em))以下 HTML 行中的含义吗？特别是 .333 值；那是从哪里来的？

取自http://ericportis.com/posts/2014/srcset-sizes/

长度可以是各种各样的东西！长度可以是绝对的（例如 99px，16em）或相对的（33.3vw，如我们的示例）。您会注意到，与我们的示例不同，有许多布局结合了绝对单位和相对单位。这就是令人惊讶的良好支持的 calc() 函数的用武之地。假设我们在 3 列布局中添加了一个 12em 侧边栏。我们会像这样调整我们的尺寸属性：

我明白这一点：

• （最小宽度：36em）=媒体查询
• calc(.333 * (100vw - 12em)) = 渲染图像大小
• 100vw = 默认渲染图像长度

我有以下快照点：480px, 900px, 1800px, 2400px.

这个标记：

我应该如何让响应式图像工作？

关于<img srcset=".." sizes=".."/>响应式图像的 html 标记 + 属性的问题。

• 在 3x 视网膜显示器 (3 * 341 = 1023) 上，srcset 中的 w 描述符是指设备像素 (1023px) 还是布局/css 像素 (341px)？
  编辑：显然 w 描述符指定了图像分辨率，这与设备像素或 css 像素无关。
  但问题是，浏览器如何选择提供的图像之一？基于设备像素，还是基于 css 像素？
• size 属性中的媒体查询是指设备像素还是布局像素？
• size 属性中的图像宽度 px 是指设备像素还是布局像素？

我自己的猜测是，尺寸总是指布局像素。但如果可以证实这一点，我会更喜欢。

（理想情况下，我希望根据设备上的像素密度提供不同的 jpg 质量。Retina = 低质量，高分辨率。但这可能是一个单独的问题）

此处的完整场景：响应式 img/srcset/sizes：不同的 jpg 质量取决于设备像素密度？

编辑：当我说“设备像素”时，我的意思是设备上的物理像素。

我正在寻找一种响应式图像策略，该策略允许根据设备像素密度提供不同的 jpg 质量。

在高分辨率的小屏幕上，我会提供低质量但高分辨率的 jpg。在像素密度低的大屏幕上，我会提供高质量的 jpg，与设备分辨率完美匹配。

问题：
这在某种程度上可能<img srcset=".." sizes=".." />吗？

背景/场景

• 具有不同原始尺寸的不同原始图像。
• 不同的图像显示上下文：作为图库缩略图、嵌入博客文章、模态框、全屏..
• 响应式布局，通过媒体查询改变这些图像的显示大小，不一定成比例。
  例如，在桌面上显示为 100 像素缩略图的内容可能会在移动设备上以全宽显示。
• 具有分辨率倍增器的高分辨率或“Retina”设备。在这些我想要很多像素，但文件大小很小。

我正在考虑的解决方案

我认为有希望的方法是<img srcset=".." sizes=".."/>.

但是，我想知道是否或如何组合 x 描述符和 w 描述符。

x 描述符指定相对大小。但相对于什么？原始图像大小和布局宽度都<img>可以在上下文和视口之间变化。视口报告媒体查询的宽度，但实际像素宽度可能是报告的视口宽度的 2 倍或 3 倍，这要归功于视网膜显示器。

w-descriptor 指定一个绝对大小。对于桌面上的缩略图大小和移动设备上的全宽图像上下文来说，这听起来要好得多 - 反之亦然。

问题/相关

如何根据设备上的像素密度提供不同的 jpg 质量？（如上问题）

相关问题：srcset 和 size 是指设备像素还是布局像素？

我正在尝试掌握 srcset，但我无法找到详细的参考。

据我了解，我可以做这样的事情来指定手机的图像。

但是我不清楚如何指定为显示密度校正图像。

在上面的示例中，屏幕宽度小于 480 像素，我指定使用 300 像素的图像。然而，在 2 倍视网膜显示器上，我想要一个 600 像素宽度的图像，但屏幕尺寸仍将读取为 480 像素。

如何为不同的像素密度指定另一个图像？

我已经阅读了许多关于使用srcset设备像素密度调整以及艺术指导的文章：

Paddi Macdonnell 2015 年的响应式图像状态

srcset 第 2 部分：Rich Finelli 的 W 描述符和大小属性

这些都没有明确说明是否可以在没有sizes属性的情况下使用 w 描述符。大多数表示相反（w-descriptor 与 一起工作sizes）

我自己的初步测试证实，图像切换确实只使用 w 描述符。

我发现，当使用 w-descriptor 根据它们的宽度指定许多不同的图像时，浏览器将选择适合有限空间的最佳图像。

不需要其他代码。

在设计响应式网站时，这显然是令人困惑的，因为作为设计师，我只需要以下情况：

1. 根据设备像素密度更改图像（对我有用。太好了！）
2. 根据可用宽度更改图像（艺术方向）（对我有用。太棒了！）

我想知道这sizes将如何影响这场灾难。我完全理解这是一个新功能。

如何使用 jQuery 定位图片元素中源标记的 srcset 属性？更改下面的 xxxxxxxxxx.jpg 和 yyyyyyyyyy.jpg 的值的正确 jQuery 代码是什么？

在Wordpress 4.4 中，图像会自动获得一个srcset属性。我的问题如下（我在写这个问题时解决了这个问题，请参阅下面的答案）：

• 为了将所有内容传输到 https，我将帖子表src="http://...中的所有引用替换为（我后来将其更改为支持两种协议）；src="https://...src="//...
• 所有帖子上的图像在src属性中都获得了正确的 URL；
• 但是，在所有获取该srcset属性的图像中，其中的 URL 始终带有http://引用。

为什么会这样？为什么这些 URL 没有得到我新更新的https://开头？

我正在使用srcset为大型设备上的用户显示动画 GIF，但需要向中小型设备上的用户显示静态 JPG。

当我在 1x 屏幕上调整浏览器窗口的大小时，以下代码效果很好。我遇到的问题是在 iPad 上以纵向模式（768 像素）查看页面时，正在显示动画 GIF。我知道浏览器正在尝试显示更高质量的图像，因为它是 2 倍分辨率，但就我而言，它需要是完全不同的图像。

如果用户的屏幕宽度超过 940 像素，如何将其更改为仅显示 GIF？