WordPress图片响应式适配问题：移动端加载错误尺寸求助

问题分析 #

你当前的sizes规则中，移动端（<768px）使用95.45vw作为图片显示宽度。浏览器会根据这个值计算出图片的实际渲染宽度，然后在srcset中选择最接近且不小于该渲染宽度的图片。

之所以加载985x555（985w）而非728x410（728w），大概率是因为：

• 移动端实际渲染宽度的计算值，浏览器判断985w的图片比728w更匹配（比如你的图片容器在移动端的实际宽度超过728px，或者95.45vw计算后的值结合设备像素比，让浏览器认为985w是更优选择）；
• sizes规则没有限制移动端的最大显示宽度，导致浏览器优先选择更大的图。

解决方案 #

• 修正sizes规则，限制移动端最大宽度
  将sizes中的移动端规则改为min(95.45vw, 728px)，这样既保留自适应宽度，又限制最大显示宽度为728px，浏览器会优先选择728w的图片：

  function blog_2( $attr, $attachment, $size ) {
      $attr['sizes'] = '(min-width: 1025px) 1118px, (min-width: 768px) 985px, min(95.45vw, 728px)';
      return $attr;
  }
  add_filter( 'wp_get_attachment_image_attributes', 'blog_2', 10, 3 );
  

• 验证图片实际渲染宽度
  用浏览器开发者工具切换到移动端模式，查看图片的计算宽度（Computed Width）：

  • 如果实际渲染宽度远小于728px，可进一步调整sizes中的最大限制值，比如设为min(95.45vw, 480px)，让浏览器选择更匹配的小图；
  • 如果实际渲染宽度接近985px，说明你的移动端布局中图片容器过宽，需要先调整CSS布局，再适配sizes规则。

• 确保只针对目标图片应用规则
  如果你只想让特定尺寸的图片生效（比如仅全屏尺寸），可在函数中添加判断：

  function blog_2( $attr, $attachment, $size ) {
      // 仅对full尺寸图片应用规则
      if ( $size === 'full' ) {
          $attr['sizes'] = '(min-width: 1025px) 1118px, (min-width: 768px) 985px, min(95.45vw, 728px)';
      }
      return $attr;
  }
  add_filter( 'wp_get_attachment_image_attributes', 'blog_2', 10, 3 );
  

• 清除缓存
  修改代码后，务必清除WordPress缓存、CDN缓存及浏览器缓存，确保新的sizes规则生效。

内容的提问来源于stack exchange，提问作者alma.mobilestore