WordPress 6.7.1在Chrome中懒加载图片垂直拉伸问题（sizes="auto"）

1. 确保图片设置正确的宽高属性 #

WordPress原生懒加载有时会丢失图片尺寸信息，导致Chrome无法预计算占位空间。手动给图片添加width和height属性，同时配合CSS保证自适应：

img {
  max-width: 100%;
  height: auto;
}

编辑文章时，可在图片块的高级设置中填写原始宽高，或直接修改HTML标签：

<img loading="lazy" src="your-image-path.jpg" width="800" height="600" alt="图片描述">

2. 禁用原生懒加载，改用自定义方案 #

WordPress 6.7.1的原生懒加载可能和Chrome 131的渲染逻辑冲突。通过主题functions.php禁用原生功能：

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

再用Intersection Observer实现自定义懒加载，提前预留宽高比占位：

document.addEventListener("DOMContentLoaded", () => {
  const lazyImgs = document.querySelectorAll('img.lazy');
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  });
  lazyImgs.forEach(img => observer.observe(img));
});

对应HTML和CSS：

<img class="lazy" data-src="your-image-path.jpg" width="800" height="600" alt="图片描述">

img.lazy {
  background: #f5f5f5;
  display: block;
  aspect-ratio: 800/600; /* 匹配图片原始宽高比 */
}

3. 排查主题/插件的CSS冲突 #

部分主题会给图片设置固定高度或错误的object-fit属性，导致拉伸。检查样式表中是否存在类似代码：

img {
  height: 100%;
  object-fit: cover;
}

将object-fit改为contain，或直接移除固定高度设置，保留height: auto;。

4. 强制刷新缓存 #

Chrome可能缓存了旧的渲染规则，按下Ctrl+Shift+R强制刷新页面；同时清除WordPress缓存插件的缓存，确保新样式和属性生效。

内容的提问来源于stack exchange，提问作者Mike Wells