WordPress 插入大图看不清怎么办：多档尺寸怎么选 + 灯箱滚轮缩放改造

add_action('init', function () {
    update_option('thumbnail_size_w', 300);
    update_option('thumbnail_size_h', 200);
    update_option('thumbnail_crop', 1);      // 1 = 硬裁到 300x200
    update_option('medium_size_w', 640);
    update_option('medium_size_h', 0);       // 0 = 高度自适应，不裁
    update_option('medium_large_size_w', 768);
    update_option('medium_large_size_h', 0);
    update_option('large_size_w', 1280);
    update_option('large_size_h', 0);
});

// 用不上的档位直接摘掉，省磁盘也省生成时间
add_filter('intermediate_image_sizes_advanced', function ($sizes) {
    unset($sizes['medium_large']);
    return $sizes;
});

add_action('wp_footer', function () {
    if (!current_user_can('manage_options')) return;
    echo '<pre>';
    foreach (get_intermediate_image_sizes() as $s) {
        echo $s . '  ';
    }
    echo '</pre>';
});

function zoomAt(cx, cy, factor) {
  var before = img.getBoundingClientRect();
  if (!before.width) return;
  // 光标落在图片的哪个比例位置
  var ux = (cx - before.left) / before.width;
  var uy = (cy - before.top)  / before.height;

  z = Math.min(8, Math.max(1, z * factor));
  applyScale();                       // 按 z 重设图片宽度

  var after = img.getBoundingClientRect();
  // 让同一个比例点回到光标下面
  body.scrollLeft += (after.left - (cx - ux * after.width));
  body.scrollTop  += (after.top  - (cy - uy * after.height));
}

overlay.addEventListener('wheel', function (e) {
  e.preventDefault();                 // 别让页面跟着滚
  var d = e.deltaY * (e.deltaMode === 1 ? 16 : 1);
  zoomAt(e.clientX, e.clientY, Math.exp(-d * 0.0018));
}, { passive: false });

function startDrag(cx, cy) {
  if (z <= 1.005) return;            // 没放大就不拖
  dragging = true; moved = 0;
  sx = cx; sy = cy;
  ox = body.scrollLeft; oy = body.scrollTop;
  img.classList.add('n997-dragging');
}
function moveDrag(cx, cy) {
  if (!dragging) return;
  body.scrollLeft = ox - (cx - sx);
  body.scrollTop  = oy - (cy - sy);
}
img.addEventListener('mousedown', function (e) {
  if (e.button !== 0) return;
  e.preventDefault();                // 关键：挡掉浏览器「把图片拖出去」的原生行为
  startDrag(e.clientX, e.clientY);
});
document.addEventListener('mousemove', function (e) {
  moveDrag(e.clientX, e.clientY);
});
document.addEventListener('mouseup', endDrag);

.lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  overflow: auto;
}

.lightbox-overlay .lightbox-body {
  overflow: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.lightbox-overlay .lightbox-image {
  margin: auto !important;
  flex-shrink: 0 !important;
}

// 连上 headless Chrome 后，直接派发事件
await send('Page.navigate', { url: articleUrl });
await sleep(6000);

// 1. 打开灯箱
await ev(`document.querySelectorAll('.single-article__content img')[0].click()`);
await sleep(2500);

// 2. 滚轮放大 4 格
await ev(`
  var ov = document.querySelector('.lightbox-overlay');
  var r = img.getBoundingClientRect();
  for (var i = 0; i < 4; i++)
    ov.dispatchEvent(new WheelEvent('wheel', {
      deltaY: -100, clientX: r.left + r.width/2,
      clientY: r.top + r.height/2, bubbles: true, cancelable: true
    }));
  img.offsetWidth;
`);

// 3. 按住左键往下拖，看能不能滚到顶部
await ev(`
  img.dispatchEvent(new MouseEvent('mousedown', {clientX: cx, clientY: cy, button: 0, bubbles: true}));
  for (var i = 1; i <= 30; i++)
    document.dispatchEvent(new MouseEvent('mousemove', {clientX: cx, clientY: cy + i*30, bubbles: true}));
  document.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
  body.scrollTop;   // 应该是 0
`);