Question

我正在使用wordpress 4.6.1构建新网站。开箱即用它支持响应式图像。我创建了一个新主题，只需添加循环即可显示帖子内容。当我将图像插入到帖子中时，它会正确显示图像，但它没有响应，即它不会根据浏览器大小提供不同的图像。

生成的图像HTML如下：

`<img
width="1110"
height="740"
src="http://digitaltestsite2.biz/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg"
class="attachment-large size-large wp-post-image"
alt="Feature Story"
srcset="
    /wp-content/uploads/2016/08/Feature-Story-1110x740.jpg 1110w,
    /wp-content/uploads/2016/08/Feature-Story-600x400.jpg 600w,
    /wp-content/uploads/2016/08/Feature-Story-768x512.jpg 768w,
    /wp-content/uploads/2016/08/Feature-Story-250x167.jpg 250w,
    /wp-content/uploads/2016/08/Feature-Story-500x333.jpg 500w,
    /wp-content/uploads/2016/08/Feature-Story-350x233.jpg 350w,
    /wp-content/uploads/2016/08/Feature-Story-700x466.jpg 700w,
    /wp-content/uploads/2016/08/Feature-Story.jpg 1200w
"
sizes="
    (min-width:1199px) 1110px,
    (min-width:991px) 768px,
    (min-width:767px) 590px,
    (min-width:543px) 500px,
    295px
"

`

（N.B。我为sizes属性添加了一个过滤器以启用更多断点。）

如果我删除宽度和高度，图像响应但是wordpress似乎正在生成这个，所以我不相信我应该删除它。我已经在Chrome和Firefox中试过并复制了这个。

有没有人对这是否是正确的行为和/或我做错什么有任何建议？

提前感谢任何输入。

Answer 1

测试这些东西可能很棘手。首先，一旦Chrome（我认为Firefox和Safari也有）更大的资源比他们在缓存中需要的资源更多，它们将不会通过网络加载较小的资源。对于两个人来说，sizes对于精神模型来说可能是非常复杂的......

通过删除width和height进行修复是没有意义的，因为我相信在确定布局宽度时，已解析的sizes大小胜过width，并且要加载srcset。

的资源

我建议：

尝试在测试之间清除缓存
即使解决了这个问题......只要您使用自适应图像执行任何操作，将页面输入https://ausi.github.io/respimagelint/总是一个好主意！

WordPress图像无法正确显示响应它获得固定的高度和宽度

1 个答案: